1. Початок роботи
2. компоненти Grid
3. Grid-контейнер
4. Grid-елементи
5. Grid-лінії
6. Grid-шлях
7. Grid-осередок
8. Grid-область
9. підтримка браузерами

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

Так, за допомогою CSS завжди можна було створити макет, але кожен підхід має свої недоліки і, по суті, є хаком. Спочатку для верстки використовувалися таблиці, потім float'и, позиціонування і inline-block ... Дані інструменти не були розроблені спеціально для створення колоночного макетів, і багато необхідні функції були недоступні (наприклад, вертикальне центрування). Рішення практично кожної проблеми прирівнювалося до «танцю з бубном».

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

Початок роботи

Робота з Grid Layout схожа на Flexbox і полягає в застосуванні спеціальних CSS-правил до батьківського елементу (grid-контейнеру) і до його дочірнім елементам (grid-елементам). Для початку необхідно:

• визначити grid-контейнер шляхом додавання до нього властивості display із значенням grid;
• задати розміри рядків і стовпців, використовуючи властивості grid-template-rows і grid-template-columns;
• помістити дочірні елементи в сітку за допомогою властивостей grid-row і grid-column.

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

компоненти Grid

Нижче будуть описані компоненти Grid-системи. Просимо вас розібратися в них і запам'ятати термінологію, щоб в наступних уроках ви розуміли, про що йде мова.

Grid-контейнер

Grid-контейнер (англ. Grid container) - це елемент, з яким задано властивість display: grid. Він є безпосереднім батьком всіх grid-елементів. Приклад grid-контейнера:

<Div class = "grid-container"> <! - це grid-контейнер -> <div class = "grid-item"> </ div> <div class = "grid-item"> </ div> < div class = "grid-item"> </ div> <div class = "grid-item"> </ div> </ div>

Grid-елементи

Grid-елементи (англ. Grid items) - прямі нащадки grid-контейнера. Важливо: нащадки grid-елементів вже не є нащадками grid-контейнера. Приклад grid-елементів:

<Div class = "grid-container"> <div class = "grid-item"> </ div> <! - це grid-елемент -> <div class = "grid-item"> </ div> < ! - це grid-елемент -> <div class = "grid-item"> <! - це grid-елемент -> <div class = "some-item"> </ div> <! - це НЕ grid-елемент -> </ div> <div class = "grid-item"> </ div> <! - це grid-елемент -> </ div>

Grid-лінії

Grid-лінії (англ. Grid lines) - це розділові лінії, які складають структуру сітки. Лінії можуть бути горизонтальними і вертикальними (grid-лінії рядків і grid-лінії стовпців) і розташовуватися по обидві сторони від рядка або стовпця. Приклад grid-лінії:

Grid-шлях

(англ. Grid track) - простір між двома сусідніми grid-лініями. Можна думати про них як про рядках і шпальтах сітки. Приклад grid-шляху:

Grid-осередок

(англ. Grid cell) - простір між двома сусідніми горизонтальними і двома сусідніми вертикальними grid-лініями. Приклад grid-осередки:

Grid-область

(англ. Grid area) - це спільний простір, оточене чотирма grid-лініями. Grid-область може складатися з будь-якої кількості grid-осередків. Приклад grid-області:

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

Станом на грудень 2017 року модуль CSS Grid Layout підтримується наступними браузерами:

• Firefox 52+;
• Chrome 57+;
• Safari 10.1+;
• Opera 44+;
• Edge 16+;
• IE 10-11 і Edge 12-15 (часткова підтримка з префіксом -ms-).

Стежити за змінами в списку браузерів, що підтримують даний модуль, можна на сайті Caniuse .

У наступному уроці ми розглянемо властивості для grid-контейнера .