Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

CSS Grid Layout вводить двовимірну сітку до CSS. Сітки можуть бути використані для виділення основних областей сторінки або невеликих елементів інтерфейсу користувача. У цій статті надана схема CSS Grid Layout та нова термінологія, що є частиною специфікації CSS Grid Layout Level 1. Функції, наведені в цьому огляді, будуть більш детально пояснені далі в цьому посібнику.

Що таке grid?

Grid є перехресним набором  горизонтальних і вертикальних ліній, що перетинаються - один набір визначає стовпці,  інший рядки. Елементи можуть бути розміщені на сітці, дотримуючись цих стовпців та рядків. Макет сітки CSS має такі особливості:

Фіксовані та гнучкі розміри смуг

Ви можете створити сітку з фіксованими розмірами смуг – наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Ви також можете створити сітку з використанням гнучких розмірів у відсотках або з новою одиницею fr, яку розроблену саме для цієї мети.

Розміщення елементів

Ви можете розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.

Створення додаткових смуг для вмісту

Ви можете визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання " стільки стовпчиків, скільки вміститься в контейнер".

Управління вирівнюванням

Сітка містить функції вирівнювання для того, щоб ми могли контролювати, як вирівнюються розміщені в області сітки елементи  та як вирівнюється вся Grid-сітка.

Управління вмістом, що перекривається

У секцію сітки можна додати більш ніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою z-index властивості.

Grid - це потужна специфікація, яка у поєднанні з іншими можливостями CSS такими, як flexbox, дозволяє вам створювати макети, які раніше неможливо було створити за допомогою CSS. Все починається шляхом створення сітки у grid-контейнері.

Grid-контейнер

Ми створюємо grid-контейнер оголошуючи display: grid або display: inline-grid на елементі. Як тільки ми це зробимо, всі прямі діти елементу стають grid-елементами.

У цьому прикладі, у мене div-елемент з класом wrapper, що містить в собі п'ять дочірніх елементів.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Я роблю з класу .wrapper grid-контейнер.

.wrapper {
  display: grid;
}

Всі прямі нащадки тепер є grid-елементами. В браузері ви не помітите ніякої різниці між віглядом елементів до і після створення grid-контейнеру. З цієї точки зору вам буде корисно працювати в редакторі Firefox Developer Edition, який має Grid Inspector, доступний як частина інструментів розробника. Якщо ви розглянете цей приклад в  Firefox і перевірите grid, ви побачите маленький значок біля значення grid. Клікніть його і сітка накладеться на цей елемент у вікні браузера.

Using the Grid Highlighter in DevTools to view a grid

Як вийде - працюйте з  CSS Grid Layout, це інструмент надасть вам краще розуміння того що відбувається з вашою grid-сіткою візуально. 

Якщо ми хочемо щоб це було більше grid-орієнтовано, треба додавати більше смуг-стовбців.

Grid Смуги

Ми визначаємо рядки і стовпчики на нашій grid-сітці  властивостями grid-template-columns та grid-template-rows. Вони визначають grid смуги. Grid-смуга – це простір будь якими двома лініями на grid-сітці. На зображенні нижче кольорова смуга – перша смуга-рядок на нашій grid-сітці.

До попереднього прикладу можна додати властивість  grid-template-columns, визначаючи розмір смуг-стовпчиків.

Таким чином створено grid-сітку з трьома смугами-стовпчиками шириною по 200 рх. Дочірні елементи вкладатимуться в цю grid-сітку в кожну клітинку. 

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Одиниця fr 

Смуги визначаються одиницями довжини. Grid-сітка має додаткову одиницю довжини яка допомагає створювати гнучкі grid-смуги. Одиниця fr  являє собою частку вільного простору в  grid-контейнері. Наступна сітка створює три рівних по ширині смуги які  стають більше і менше відповідно наявному простору. 

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

В наступному прикладі ми створюємо визначення з 2fr смугою і дві 1fr смуги. Доступний простір розділений на чотири частини, дві з яких надаються першій смузі і по одній частині кожній з наступних двох.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

В останньому прикладі ми комбінуємо абсолютні одиниці ширини смуг з фракційними. Перша смуга  500 px, фіксована ширина відбирається з доступного простору. Решта простору ділиться на три і призначається двом гнучким смугам пропорційно. 

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

Визначення смуг зі значенням repeat()

Великі grid-сітки з багатьма стугами можуть використовувати значення repeat() для скорочення при визначенні стовпчиків: 

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Також може бути записано як:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Значення repeat може використовуватись лише для частини стовпчиків. В наступному прикладі ініційовано смугу 20 рх, секцію з 6 смуг шириною 1fr, і смугу 20 рх. 

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

Значення repeat визначає смуги, тобто його можливо використовувати для створення цілих шаблонів стовпчиків. В наступному прикладі grid-сітка складається з 10 смуг. Смуга 1fr , смуга 2fr і так п'ять разів.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

Неявна і явна Grid-сітка

Cтворюючи Grid-сітку нашого прикладу, ми визначили стовпчики-смуги властивістю grid-template-columns, але дозволимо grid-сітці створювати рядки так, як краще для контенту. Такі рядки створюються в неявній grid-сітці. Явна grid-сітка складається з рядків і стовпчиків, які визначаються властивостями  grid-template-columns та grid-template-rows.

Якщо ми розташовуємо щось поза цією grid-сіткою, або кількість вмісту потребує більше grid смуг, тоді  grid-сітка створює рядки і стовпчики в неявній  grid-сітці. Такі смуги матимуть авторозмір за замовчуванням якраз щоб вмістити свій контент.

Ви також можете визначити встановлений розмір для смуг, створених в неявній grid-сітці властивостями grid-auto-rows та grid-auto-columns.

В прикладі нижче ми використовуємо grid-auto-rows  щоб забезпечити неявне створення смуги висотою 200 рх.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Розміри смуги і minmax()

Встановлюючи явну grid-сітку або визначаючи розміри для автоматично створених рядків або стовпчиків може виникнути необхідність надання смугам мінімального розміру. Але треба переконатись що розширюючись, вони відповідатимуть будь якому доданому контенту. Наприклад ми хочемо щоб рядки ніколи не були менше 100 рх, але якщо контент розширюється до 300 рх, ми б хотіли щоб рядок розширився до такої висоти. 

Grid для таких випадків має функцію minmax(). В наступному прикладі я використовую minmax()в значенні grid-auto-rows. Це означає, що автоматично створені рядки матимуть мінімальну висоту 100 рх, а максимальну auto. Використання auto означає, що розмір буде підлаштовуватись під розмір контенту таким чином, щоб вмістити найвищий елемент в цьому рядку.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
<div class="wrapper">
  <div>One</div>
  <div>Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Grid Лінії

Варто зауважити що коли ми визначаємо Grid, ми визначаємо grid-смуги (але не grid-лінії). В такому випадку Grid дає нам нумеровані лінії для позиціонування елементів. В прикладі нижче Grid має 3 стовпчика, 2 рядки і 4 вертикальних лінії.

Diagram showing numbered grid lines.

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

Позиціонування елементів по лініях

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

В наступному прикладі ми розміщуємо перші два елементи на Grid-cітці, яка складається з трьох смуг-стовпчиків, застосовуючи властивості grid-column-start, grid-column-end, grid-row-start та grid-row-end.  Рухаючись зліва направо, перший елемент починається з вертикальної лініі 1 і простягається до вертикальної лініі 4, що праворуч нашої Grid-сітки. Він починається на горизонтальній лінії 1 і закінчується на горизонтальній лінії 3, тобто займає два рядка смуг.

Другий елемент починається з вертикальної лініі 1, і простягається на одну смугу. Це за замовчуванням, тому можна не вказувати кінцеву лінію. Також по рядках він простягається з горизонтальній лінії 3 до горизонтальній лінії 5. Інші елементи розміщуються в порожніх просторах на Grid-сітці.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 
.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}
.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

Не забуваймо, що можна використовувати Grid Inspector в Firefox Developer Tools щоб побачити як елементи позиціонуються на лініях Grid-сітки.

Grid-клітини

Grid-клітина – найменша одиниця Grid-сітки, по аналогії з чарунком таблиці. Як ми бачили в попередніх прикладах, якщо Grid-сітка визначена як батьківська, дочірні елементи лежатимуть по одному в кожній її клітині. На зображенні кольором позначено першу клітину Grid-сітки.

The first cell of the grid highlighted

Grid-ділянки

Елементи можуть розташовуватись на одній або декількох клітинках як в рядок так і в стовпчик, і це створює Grid-ділянки. Grid-ділянки завжди прямокутні, неможлива, наприклад, L-подібна Grid-ділянка. На зображенні Grid-ділянка займає два рядки і два стовпчики.

A grid area

Розриви

Розриви між Grid-клітинами створюються властивістями grid-column-gap та grid-row-gap, або скорочено grid-gap. В наступному прикладі створюється проміжок у 10рх між стовпчиками та проміжок 1em між рядками. 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

Примітка: Коли гріди тільки почали використовуватись браузерами column-gap, row-gap та gap мали префікси grid- як от grid-column-gap, grid-row-gap та grid-gap відповідно.

Браузери наразі оновлюються, щоб видалити цей префікс, проте попередньо встановлені версії також будуть підтримуватися як псевдоніми, що робить їх безпечними для використання. В даний час деякі веб-переглядачі не підтримують безпрефіксний варіант, тому в прикладах цього посібника використовуюється версія з grid- префіксом.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Будь-який простір, відведений на розриви, буде враховуватись до відведення простору для гнучких fr довжин смуг. Розриви використовуваються в розмітці, як звичайні grid-смуги, за виключенням того, що ви не зможете в них нічого помістити. З точки зору лінійного позиціонування розрив діє як товста лінія.

Вкладені Grid-сітки

Grid-елементи можуть ставати Grid-контейнерами. В попередньому прикладі ми створили Grid-сітку з трьох стовпчиків з двома позиціонованими елементами.  Перший з них має піделементи. Оскільки ці елементи не є прямими нащадками, вони не беруть участі в  Grid-розкладці і відображаються в нормальному потоці. 

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

Nested grid in flow

Якщо застосувати display: grid до box1, то ця Grid-смуга також стане Grid-сіткою. А елементи, що в ній містяться, надалі розташовуватимуться на цій новій Grid-сітці.

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

В цьому випадку, дочірня сітка немає відношення до батьківської. Як ви можете бачити на прикладі, вона не наслідує батьківськи grid-gap, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.

Під-сітка

У робочій чорнетці специфікації Grid Level 2 є функція під назвою subgrid, яка має дозволити нам створювати вкладені сітки, які б використовували визначення смуги батьківської сітки.

Примітка: під-сітки ще не реалізовані в жодному браузері, і їхня специфікація ще може змінюватися.

У поточній специфікації ми відредагуємо вищезгаданий приклад вкладеної Grid-сітки, змінивши визначення смуги з grid-template-columns: repeat(3, 1fr) , на grid-template-columns: subgrid. Вкладена сітка надалі використовуватиме батьківські Grid-смуги до елементів макета.

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: subgrid;
}

Нашарування елементів за допомогою z-index

Grid-елементи можуть займати одну і ту ж саму клітину. Якщо повернутись до нашого прикладу з елементами, що розташовані за номером рядка, ми можемо змінити його так, щоб два елементи перекривали один одного.

<div class="wrapper">
  <div class="box box1">One</div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}

Елемент box2 тепер перекриває box1, він відображається зверху, тому що пізніше трапляеться в коді документу.

Керування послідовністю

Ми можемо контролювати порядок, в якому елементи накладаються один на одного, використовуючи властивість z-index. Якщо надати box2 нижчий z-index, ніж в box1, то він і буде показаний нижче у стеці.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

Наступні кроки

У цій статті ми швидко переглянули специфікацію Grid Layout. Пограйте з прикладами коду, а потім переходьте до наступної частини цього посібника, де ми насправді почнемо заглиблюватись в деталі CSS Grid Layout.

Мітки документа й учасники

Мітки: 
Зробили внесок у цю сторінку: SphinxKnight, siroha, TeeZ0NE, AndriiLevchenko, Tenebries, ivaskonyan
Востаннє оновлена: SphinxKnight,