Повне керівництво по CSS Grid

Знайомство

CSS Grid Layout (або просто "сітка") — це двовимірна система компонування, що повинна перевернути ваші уявлення про створення макетів. CSS вже давно використовується для компонування елементів на сторінці, але він майже ніколи не виконував цю роботу як слід. Спочатку ми використовували таблиці, потім плавучі елементи (float), позиціонування та інлайн-блоки, але все це — хаки, що позбавляли нас багатьох цукерочок (наприклад, вертикального вирівнювання). С flexbox ситуація покращилась, але він розрахований на одновимірні макети. І ось, з приходом CSS Grid (який все ще не відбувся) все повинно змінитися.

В цій статті я буду описувати найновішу версію стандарту (на час написання), і не виключено, що до моменту, коли ви будете це читати, щось зміниться. Специфікація CSS Grid все ще в стані чернетки.

Основи та підтримка браузерами

Почати використовувати сітку досить просто. Вам лише потрібно задати головному контейнеру display: grid, вказати кількість рядків та стовпців за допомогою grid-template-columns та grid-template-rows, а потім вставити дочірні елементи, задавши їм grid-column та grid-row. Як і з flexbox, початковий порядок елементів не важливий, в CSS ви можете змінити їх порядок як вам заманеться, що дозволяє змінювати вашу сітку як завгодно з використанням медіа-запитів.

Слід усвідомлювати, що CSS Grid ще не можна використовувати в продакшені. Поки що це лише чернетка, що все ще нормально не підтримується ні в одному браузері (без додаткових налаштувань). В IE10 та IE11 підтримується стандарт з застарілим синтаксисом. Якщо ви хочете поекспериментувати з сіткою, то найкращим вибором буде Chrome, Opera та Firefox з деякими налаштуваннями. В Chrome перейдіть на chrome://flags та ввімкніть "experimental web platform features", те ж саме слід зробити і для Opera (opera://flags). В Firefox слід ввімкнути layout.css.grid.enabled.

Ось так виглядає підтримка браузерами на поточний момент (caniuse)

Лишилось трохи почекати, щоб почати використовувати сітку в своїх проектах. Але вивчити її потрібно вже зараз.

Важлива термінологія

Перед тим, як ми почнемо розглядати найцікавіше, слід визначитися з декількома термінами.

Контейнер сітки (Grid Container)

Елемент, якому встановили display: grid, це головний батьківський елемент всіх елементів сітки. В прикладі нижче контейнером є елемент з класом container.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Елемент сітки (Grid Item)

Дочірній елемент (прямий нащадок) контейнера сітки. Наприклад, .item є елементом сітки, а .sub-item — ні.

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Лінія сітки (Grid Line)

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

Трек сітки (Grid Track)

Це простір між двома паралельними лініями сітки. Можете вважати, що це стовпчик або рядок сітки.

Комірка сітки (Grid Cell)

Це простір між двома сусідніми рядками і двома сусідніми стовпцями ліній сітки. Це — одиниця нашої сітки.

Ділянка сітки (Grid Area)

Будь-який простір між чотирма лініями сітки, може складатися з скількох завгодно комірок.

Властивості контейнера сітки

display

Оголошує, що поточний елемент буде використовуватися як контейнер сітки і встановлює новий контекст сітки форматування для його дочірніх елементів.

Можливі значення:

• grid — генерує звичайну сітку
• inline-grid — генерує інлайн-сітку
• subgrid — якщо ваш контейнер одночасно є елементом іншої сітки (тобто вони вкладені), ви можете використовувати дане значення щоб вказати, що параметри для поточної сітки слід взяти з батьківської.

.container{
  display: grid | inline-grid | subgrid;
}

Зауважте, що з контейнерами сітки не працюють такі властивості: column, float, clear та vertical-align.

grid-template-columns

grid-template-rows

Визначає рядки та стовпчики таблиці (список значень, розділених пробілом). Значення представляють розмір треку, а розмір простору між ними визначає ширину лінії сітки.

Значення:

• — може бути фіксованим розміром, відсотками або часткою вільного місця сітки (з використанням одиниць fr)
• — довільне ім'я

.container{
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Приклади:

Якщо ви не вказуєте ім'я для лінії, вона отримає свій номер автоматично.

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Але ви можете вказати назву лінії явно. Зауважте, що для цього використовуються квадратні дужки:

.container{
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Лінія може мати декілька назв. Наприклад, тут друга лінія має два ім'я: row1-end та row2-start.

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Якщо значення повторюються, ви можете скоротити запис за допомогою функції repeat():

.container{
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

Що є еквівалентом цього коду:

.container{
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

Використовуючи fr ви можете вказати розмір треку відносно вільного простору сітки. Наприклад, ось так можна розділити сітку на три рівні стовпчики:

.container{
  grid-template-columns: 1fr 1fr 1fr;
}

Простір, доступний для fr вираховується без будь-яких точних значень. Наприклад, тут 50px враховуватися не будуть.

.container{
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

Описує шаблон сітки за допомогою вказання назв зон, що були оголошені за допомогою grid-area. Повторення назви призводить до розтягування на декілька комірок, також можна лишити комірку пустою.

Значення:

• — назва зони, що була оголошена за допомогою grid-area
• . — пуста комірка
• none — зони не оголошено

.container{
  grid-template-areas: "<grid-area-name> | . | none | ..."
                       "..."
}

Приклад:

.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}

.container{
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
                       "main main . sidebar"
                       "footer footer footer footer"
}

Тут створюється сітка розміром 4 стовпчики на 3 рядка. Верхній рядок займає header, середній рядок розділений на дві комірки main, пусту комірку та одну комірку sidebar. Останній рядок займає footer.

Кожен рядок повинен мати однакову кількість комірок.

Для вказання пустої комірки можна використовувати крапку (або декілька, якщо між ними немає пробілу).

Зауважте, що так ви даєте назву лише зонам, а не лініям. Коли ви використовуєте такий синтаксис, лінії на початку та кінці зони отримують ім'я автоматично. Якщо назва вашої зони — foo, назва початкових горизонтальної та вертикальної лінії буде foo-start, а останніх — foo-end. Це означає, що лінії можуть мати декілька назв, наприклад, перша лінія зліва має три назви: header-start, main-start та footer-start.

grid-column-gap

grid-row-gap

Вказує на розмір ліній сітки.

Значення:

• — розмір лінії

.container{
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Приклад:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Такі лінії створюються тільки між комірками, по краям сітки їх немає.

grid-gap

Це скорочення для grid-column-gap + grid-row-gap.

Значення:

• — розмір ліній

.container{
  grid-gap: <grid-column-gap> <grid-row-gap>;
}

Приклад:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-gap: 10px 15px;
}

Якщо grid-row-gap не вказано, то значення беруться з grid-column-gap.

justify-items

Вирівнює контент всередині комірки відносно вертикальної вісі. Дане значення застосовується до всіх комірок:

Значення:

• start — вирівнює контент по лівому краю комірки
• end — вирівнює контент по правому краю комірки
• center — вирівнює контент по центру
• stretch — розтягує контент на всю комірку (значення за умовчуванням)

.container{
  justify-items: start | end | center | stretch;
}

Приклад:

.container{
  justify-items: start;
}

.container{
  justify-items: end;
}

.container{
  justify-items: center;
}

.container{
  justify-items: stretch;
}

Встановити індивідуальну поведінку для комірки можна за допомогою властивості justify-self.

align-items

Вирівнює контент всередині комірки відносно горизонтальної вісі. Дане значення застосовується до всіх комірок:

Значення:

• start — вирівнює контент по верхньому краю комірки
• end — вирівнює контент по нижньому краю комірки
• center — вирівнює контент по центру
• stretch — розтягує контент на всю комірку (значення за умовчуванням)

.container{
  justify-items: start | end | center | stretch;
}

Приклад:

.container{
  align-items: start;
}

.container{
  align-items: end;
}

.container{
  align-items: center;
}

.container{
  align-items: stretch;
}

Встановити індивідуальну поведінку для комірки можна за допомогою властивості align-self.

justify-content

Іноді розмір вашої сітки може бути менше ніж розмір самого контейнера. Таке може статися якщо розмір ваших рядків та стовпців заданий фіксованим (в px). В такому випадку ви можете встановити вирівнювання для сітки в контейнері. Дана властивість вирівнює відносно вертикальної вісі.

Значення:

• start — вирівнює сітку по лівому краю контейнера
• end — вирівнює сітку по правому краю контейнера
• center — вирівнює сітку по центру
• stretch — розтягує сітку на всю ширину контейнера
• space-around — розміщує одиницю пустого простору між елементами та половину одиниці по краях
• space-between — розміщує одиницю пустого простору між елементами, без відступів по краях
• space-evenly — розміщує одиницю пустого простору між елементами, включаючи краї сітки

.container{
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Приклад:

.container{
  justify-content: start;   
}

.container{
  justify-content: end; 
}

.container{
  justify-content: center;  
}

.container{
  justify-content: stretch; 
}

.container{
  justify-content: space-around;    
}

.container{
  justify-content: space-between;   
}

.container{
  justify-content: space-evenly;    
}

align-content

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

Значення:

• start — вирівнює сітку по верхньому краю контейнера
• end — вирівнює сітку по нижньому краю контейнера
• center — вирівнює сітку по центру
• stretch — розтягує сітку на всю висоту контейнера
• space-around — розміщує одиницю пустого простору між елементами та половину одиниці по краях
• space-between — розміщує одиницю пустого простору між елементами, без відступів по краях
• space-evenly — розміщує одиницю пустого простору між елементами, включаючи краї сітки

.container{
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

Приклад:

.container{
  align-content: start; 
}

.container{
  align-content: end; 
}

.container{
  align-content: center;  
}

.container{
  align-content: stretch; 
}

.container{
  align-content: space-around;  
}

.container{
  align-content: space-between; 
}

.container{
  align-content: space-evenly;  
}

grid-auto-columns

grid-auto-rows

Визначає розмір треків, що створюються неявно (автоматично). Такі треки можуть виникати коли ви вказуєте неіснуючі комірки при позиціонуванні.

Значення:

• — може бути фактичним розміром, відсотками або часткою вільного простору (використовуючи fr)

.container{
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

Давайте покажу як виникають такі неявні треки. Уявіть собі ось таку сітку:

.container{
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

Це створить сітку 2х2. Але тепер уявіть що ось так ви позиціонуєте комірки:

.item-a{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b{
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Ми вказали, що .item-b займає місце з п'ятої по шосту вертикальні полоски, але ми ніколи не оголошували їх. Через це було створено декілька треків розміром в 0px, і от саме для того щоб вказати розмір таких треків використовують grid-auto-columns та grid-auto-rows.

.container{
  grid-auto-columns: 60px;
}

grid-auto-flow

Якщо в вас є елементи в контейнері, які ви не розмістили на сітці явно, браузер зробить це за вас. А ця властивість керує тим, як він буде це робити.

Значення:

• row — вказує алгоритму авторозміщення що слід заповнювати місце по рядкам, додавши нові за необхідності (значення за умовчуванням)
• column — схоже не минуле, але заповнює стовпцями
• dense — розміщує елементи як можна щільніше (але може змінити порядок елементів)

.container{
  grid-auto-flow: row | column | row dense | column dense
}

Приклади:

Уявимо собі ось таку сторінку:

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>

Ви оголошуєте сітку з п'ятьма стовпчиками та двома рядками і встановлюєте grid-auto-flow в row

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

Але при розміщенні елементів ви вказуєте координати лише двох с них:

.item-a{
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e{
    grid-column: 5;
    grid-row: 1 / 3;
}

Через те, що grid-auto-flow встановлено в row, наша сітка буде виглядати так:

Якщо встановити grid-auto-flow в column, то елементи буде розміщено ось так:

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: column;
}

grid

Це скорочений запис для таких властивостей як grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns та grid-auto-flow. Також це встановлює grid-column-gap та grid-row-gap в значення за умовчуванням.

Значення:

• none — встановлення всіх властивостей сітки в значення за умовчуванням
• / — встановлює grid-template-rows та grid-template-columns в задані значення, а решту властивостей в значення за умовчуванням
• [ [ / ] ] — приймає такі ж значення як grid-auto-flow, grid-auto-rows та grid-auto-columns. Якщо значення grid-auto-columns, замість нього буде використано grid-auto-rows. Якщо опущено обидва значення, буде використано значення за умовчуванням.

.container{
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

Приклади:

Наступні два випадки еквівалентні:

.container{
    grid: 200px auto / 1fr auto 1fr;
}

та

.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

Також еквівалентний наступний код:

.container{
    grid: column 1fr / auto;
}

та

.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

Також можна використовувати складніший синтаксис, але задавати все відразу. Ви вказуєте grid-template-areas, grid-auto-rows та grid-auto-columns, решта властивостей встановлюється в значення за умовчуванням. Простіше показати це на прикладі:

.container{
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Еквівалентний цьому коду:

.container{  
  grid-template-areas: "header header header"
                       "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto; 
}

Властивості елемента сітки

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Встановлює розміри та позицію поточного елемента в сітці (вказуються лінії початку та кінця). grid-column-start/grid-row-start — це лінії початку елементу, а grid-column-end/grid-row-end — кінця.

Значення:

• — може бути номером або ім'ям лінії
• span — елемент буде розтягнуто на вказану кількість треків
• span — елемент буде розтягнуто доки не зустріне лінію з вказаною назвою
• auto — автоматичне розміщення елемента

.item{
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Приклади:

.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

Якщо grid-column-end чи grid-row-end не вказано, елемент буде займати один трек.

Також елементи можуть накладатися один на одного (накладання регулюється за допомогою z-index).

grid-column

grid-row

Скорочення для grid-column-start + grid-column-end та grid-row-start + grid-row-end.

Значення:

• / — підтримує ті ж самі значення, що і свій "більше роздутий" родич, включаючи span

.item{
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Приклад:

.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-area

Надає елементу ім'я, так, що його можна використовувати в властивості grid-template-areas. Також цю властивість можна використовувати як заміну grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Значення:

• — ім'я для елемента
• / / / — імена чи назви ліній

.item{
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Приклади:

Ось так можно присвоїти ім'я:

.item-d{
  grid-area: header
}

А ось так задати розміри і координати:

.item-d{
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

Вирівнює поточний елемент відносно вертикальної осі.

Значення:

• start — вирівнює елемент по лівому краю зони
• end — вирівнює елемент по правому краю зони
• center — вирівнює елемент по центру зони
• stretch — розтягує елемент по горизонталі на все вільне місце (значення за умовчуванням)

.item{
  justify-self: start | end | center | stretch;
}

Приклади:

.item-a{
  justify-self: start;
}

.item-a{
  justify-self: end;
}

.item-a{
  justify-self: center;
}

.item-a{
  justify-self: stretch;
}

Щоб вирівняти відразу всі елементи в контейнері, слід використовувати його властивість justify-items.

align-self

Вирівнює поточний елемент відносно горизонтальної осі.

Значення:

• start — вирівнює елемент по верхньому краю зони
• end — вирівнює елемент по нижньому краю зони
• center — вирівнює елемент по центру зони
• stretch — розтягує елемент по вертикалі на все вільне місце (значення за умовчуванням)

.item{
  align-self: start | end | center | stretch;
}

Приклади:

.item-a{
  align-self: start;
}

.item-a{
  align-self: end;
}

.item-a{
  align-self: center;
}

.item-a{
  align-self: stretch;
}

Щоб вирівняти відразу всі елементи в контейнері, слід використовувати його властивість align-items.