CSS Grid

CSS Grid — це техніка в каскадних таблицях стилів, що дозволяє веброзробникам створювати складні адаптивні макети вебдизайну більш легко і послідовно у різних вебпереглядачах. Є й інші методи макета вебсторінок, що використовувались раніше, включаючи tables, CSS Box model та CSS Flexbox.

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

Історія

Grid модуль в CSS був розроблений CSS Working Group для того, щоб надати найкращий спосіб створення шаблонів в CSS. Він потрапив в W3C Candidate Recommendation в лютому 2017 року, а основні браузери почали його підтримку в березні 2017 року. Використовується для front-end розробки. Дана технологія має потужний функціонал та інтуїтивно зрозумілий синтаксис, а шаблони на grid безсумнівно змінюватимуть те, на чому створюється Web^[1].

Порівняння Flexbox та CSS Grid

CSS Grid можна назвати поліпшеною версією Flexbox, адже Flexbox дозволяє працювати лише в одній площині: або створювати стовпці, або створювати рядки.

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

Підтримка браузерів

Станом на березень 2017 року більшість браузерів постачали безпрефіксну підтримку CSS Grid: Chrome (включаючи Android), Firefox, Safari (включаючи iOS) та Opera. Internet Explorer 10 та 11, з іншого боку, підтримують його стару реалізацію із застарілим синтаксисом. Всі сучасні браузери для мобільних пристроїв підтримують CSS Grid, окрім браузерів Opera mini та UC.

Принцип роботи

Алгоритм дій роботи з CSS Grid є наступним:

Створюється один основний блок, в який розміщуються інші блоки (секції);
До основного блоку додається властивість display: grid;
До всіх елементів основного блоку тепер можна застосовувати властивості сіток CSS;
Додаються інші властивості.

Кожному блоку можна встановлювати ширину, висоту та його розташування. Блоки, які створюються на основі сіток, відразу мають адаптивний дизайн, який підлаштовує блоки під різні розширення екранів, що дозволяє зменшувати кількість написаного коду.

Під час роботи з CSS Grid розробник працює з Grid Layout, застосовуючи правила CSS як для батьківського (parent) елемента (який стає Grid Container), так і до дочірніх (children) елементів (які стають елементами Grid).

Особливості макета CSS Grid

Макет сітки CSS має такі особливості:

Фіксовані та гнучкі розміри смуг: Можна створити сітку з фіксованими розмірами смуг — наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Також розробник може створити сітку з використанням гнучких розмірів у відсотках або з використанням нової одиниці fr, розробленої саме для цієї мети.
Розміщення елементів: Можна розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.
Створення додаткових смуг для вмісту: Можна визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання «стільки стовпчиків, скільки вміститься в контейнері».
Управління вирівнюванням: Сітка містить функції вирівнювання для того, щоби була можливість контролювати, як вирівнюються розміщені в області сітки елементи та як вирівнюється вся Grid-сітка.
Управління вмістом, що перекривається: У секцію сітки можна додати більше, аніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою властивості z-index.

Термінологія

Grid container: Набір пересічних горизонтальних і вертикальних grid-ліній, які ділять простір на grid-області, в які можуть бути поміщені grid-елементи. Усередині grid-контейнера є два набори grid-ліній: один визначає вісь стовпців, інший визначає вісь рядків^[2].

До Grid container застосовується display: grid. Це прямий батьківський (parent) елемент для всіх елементів сітки.

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

Grid items: Дочірні елементи (прямі нащадки) контейнера.

Тут 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 lines: Горизонтальні та вертикальні роздільники grid-контейнера. Ці лінії знаходяться по обидва боки від стовпчика або рядка.

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

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

До grid lines можна прив'язувати grid-елементи — і за номерами, і по іменах, як зручніше.

Grid strip: Те, що обмежено парою сусідніх grid-ліній. Вертикальні grid-смуги — це колонки grid(аналог стовпців таблиці), горизонтальні — ряди(аналог рядків).
Grid cell: Найменша неподільна одиниця grid-контейнера, на яку можна посилатися при позиціюванні grid-елементів. Утворюється на перетині grid-рядка і grid-колонки. Аналог елемента таблиці.
Grid area: Простір всередині grid контейнера, в який може бути поміщений один або більше grid-елементів. Цей елемент може складатися з одного або більше grid осередків.

Grid-області — прямокутники з M × N суміжних grid-осередків (1 × 1 і більше). Кожна grid-область обмежена двома парами grid-ліній (парою вертикальних і парою горизонтальних). У них і розміщуються grid-елементи. Grid-областям теж можна задавати імена.

Grid track: Простір між двома суміжними grid-лініями, вертикальними або горизонтальними. Аналог border-spacing в таблиці.

.container { 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Рядки і розташування елементів

В CSS Grid можна розміщувати елементи, використовуючи номери рядків. Є можливість іменувати рядки, використовуючи grid-area, а також можливість прив'язки до області Grid.

.wrapper {
		display: grid;
		grid-template-areas: 
		"a a b"
		"a a b"
		"c d d";
	}
	.item1 {grid-area: a;}
	.item2 {grid-area: b;}
	.item2 {grid-area: c;}
	.item2 {grid-area: d;}

Розміри смуг (треків)

Сітку в Grid можна створювати з фіксованими розмірами («px»), відносними розмірами («em», «rem»), а також задаючи гнучкі розміри — '%' або 'fr' (fraction). Нова одиниця розраховується самостійно.

Калькуляція в «fr»

Наприклад, якщо доступне місце становить 900 px, і при цьому першому елементу дістається одна частка, а другому — дві, то перший отримує 1/3, а другий — 2/3 від 900 px.

<div class="grid">
		<div class="box item1">Item 1</div>
		<div class="box item2">Item 2</div>
		<div class="box item3">Item 3</div>
		<div class="box item4">Item 4</div>
	</div>

.grid {
		display: grid;
		grid-gap:20px;
		grid-template: 100px auto 100px /1fr 80px 3fr 20%;;
	}

Визначення смуг зі значенням `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

При роботі з Grid є дві осі для вирівнювання елементів.

Вісь column (стовпчик)

Коли розробник використовує властивості align-self і align-items, змінюється вирівнювання елемента в області сітки, яку помістили. Властивість align-items встановлює властивість align-self для всіх дочірніх елементів сітки. Це означає, що можна встановити властивість індивідуально, використовуючи align-self по елементу сітки.

Вісь row (рядки)

Елементи управління justify-items і justify-self на осі row / inline:

<div class="grid">
	  <div class="box item1">Item 1</div>
	  <div class="box item2">Item 2</div>
	  <div class="box item3">Item 3</div>
	  <div class="box item4">Item 4</div>
	</div>

.grid {
	  display: grid;
	  grid-gap:20px;
	  grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
	  align-items: stretch;
	}

.item1 {
	  background: #f00;
	  align-self: end;
	}
	.item2 {
	  background: #f0f;
	  align-self: flex-start;
	}
	.item3 {
	  background: #008000;
	  align-self: end;
	}
	.item4 {
	  background: #000;
	}

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

В прикладі нижче використовується 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-розкладці і відображаються в нормальному потоці.

<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>

Якщо застосувати 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, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.

Нашарування елементів за допомогою `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;
}

Висновки

Переваги

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

Недоліки

Часткова підтримка в браузерах IE10 і IE11.

Примітки

↑ (англ.)Вёрстка на Grid в CSS. Полное руководство и справочник
↑ (рос.)Обзор CSS Grid — технологии для упрощения разметки HTML-страниц [Архівовано 5 жовтня 2021 у Wayback Machine.] 2018
↑ Основна концепція макета grid [Архівовано 17 грудня 2018 у Wayback Machine.] mozilla.org

Джерела

https://www.w3schools.com/css/css_grid.asp [Архівовано 18 грудня 2018 у Wayback Machine.]
https://css-tricks.com/snippets/css/complete-guide-grid/ [Архівовано 16 грудня 2018 у Wayback Machine.]
https://developers.google.com/web/updates/2017/01/css-grid [Архівовано 4 грудня 2018 у Wayback Machine.]
https://proglib.io/p/css-grid/ [Архівовано 17 грудня 2018 у Wayback Machine.] ^{[неавторитетне джерело]}
https://tuhub.ru/posts/css-grid-complete-guide#prop-display [Архівовано 3 грудня 2018 у Wayback Machine.] ^{[неавторитетне джерело]}
https://itproger.com/news/119 [Архівовано 17 грудня 2018 у Wayback Machine.] ^{[неавторитетне джерело]}

[A_Medium_Corporation_US-1] (англ.)Вёрстка на Grid в CSS. Полное руководство и справочник

[2] (рос.)Обзор CSS Grid — технологии для упрощения разметки HTML-страниц [Архівовано 5 жовтня 2021 у Wayback Machine.] 2018

[3] Основна концепція макета grid [Архівовано 17 грудня 2018 у Wayback Machine.] mozilla.org

[1]

[2]

[3]