Сіткове компонування CSS

Сіткове компонування CSS чудово справляється з поділом сторінки на основні ділянки, чи визначенням взаємин між частинами інтерфейсу, збудованого з примітивів HTML, в термінах розмірів, положення й нашарування.

Подібно до таблиць, сіткове компонування дає авторові змогу шикувати елементи в колонки й ряди. Проте сітки CSS також дають змогу реалізувати чимало видів компонування, які значно складніше (або взагалі неможливо) виконати за допомогою таблиць. Наприклад, дочірні елементи контейнера сітки можуть розташовуватися так, що вони насправді перекриваються й нашаровуються, подібно до елементів, позиціонованих за допомогою CSS.

Базовий приклад

Приклад нижче демонструє сітку триколонкової доріжки, в котрій нові ряди створюються щонайменше зі 100 пікселями, а щонайбільше - з auto. Елементи розміщені на сітці за допомогою розташування на основі ліній.

HTML

<div class="wrapper">
  <div class="one">Один</div>
  <div class="two">Два</div>
  <div class="three">Три</div>
  <div class="four">Чотири</div>
  <div class="five">П'ять</div>
  <div class="six">Шість</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Довідник

Властивості

Функції

Типи даних

Посібники

Специфікації

{{Specifications}}

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.