Контейнер. По-перше, потрібно створити контейнер з класом .grid, всередині якого будуть знаходитися елементи сітки — у нашому випадку 9 елементів <div>. Сітка створюється на контейнері, і всі елементи всередині нього вирівнюються по заданій сітці. Просто додаємо до CSS контейнера властивість display: grid;
Після цього можна вказувати інші властивості Grid. Але поки інші властивості сітки не задані, елементи будуть розміщені вертикально один під одним так, як ідуть у HTML-розмітці.
Колонки. За колонки відповідає властивість grid-template-columns. У значенні вказується розмір кожної колонки через пробіл. Наприклад, три колонки по 100 px: grid-template-columns: 100px 100px 100px;. Елементи розподіляться у три колонки.
Рядки. За рядки відповідає властивість grid-template-rows. Щоб задати висоту рядків по 100px: grid-template-rows: 100px 100px 100px;
Відступи. Додамо простір між колонками за допомогою grid-column-gap і між рядками за допомогою grid-row-gap. Ці властивості можна об'єднати у grid-gap: 20px 30px;, де перше значення — відступ між рядками, а друге — між колонками. Якщо потрібен однаковий відступ, задаємо одне значення: grid-gap: 20px;
Фракції. grid-template-columns: 200px 1fr 1fr; — перша колонка матиме фіксовану ширину 200px, а дві інші поділять залишок простору порівну. При зміні ширини екрана, перша колонка залишиться 200px, а фракції перерахуються.
Функція repeat() для повторюваних колонок і рядків дозволяє уникнути повторень у коді:
grid-template-columns: 1fr 1fr 1fr 1fr; те саме, що grid-template-columns: repeat(4, 1fr);
grid-template-columns: 50px 200px 50px 200px; те саме, що grid-template-columns: repeat(2, 50px 200px);
Функція minmax() для адаптивних колонок дозволяє задати мінімальний і максимальний розмір.
grid-template-columns: minmax(100px, 500px) 100px 100px 100px; — перша колонка змінна, інші фіксовані.
Функція minmax() для адаптивних рядків також застосовна:
grid-template-rows: 50px minmax(50px, auto) 50px; — середній ряд росте відповідно до вмісту.
Напрямок контенту в сітці.
За замовчуванням — по рядках зліва направо. Властивість grid-auto-flow дозволяє змінювати напрям:
- row — заповнення по рядках;
- column — заповнення по колонках.
Явна сітка — визначена через grid-template-columns і grid-template-rows.
Неявна сітка — автоматично створювана, якщо контент не вміщується. Керується через grid-auto-rows і grid-auto-columns.
Переміщення елементів, лінії сітки. Лінії сітки — це умовні межі між комірками. Сині — горизонтальні, червоні — вертикальні. Нумерація зліва направо і згори вниз або у зворотному порядку зі знаком мінус.
Вертикальні лінії: grid-column-start, grid-column-end або скорочено grid-column: 2 / 4;
Наприклад, перший елемент переміщуємо між 2 та 4 лініями:
.grid > div:nth-child(1)
Розтягнути на весь ряд: grid-column: 1 / -1;
Переміщення по горизонтальних лініях (рядки)
Наприклад, елемент 2 переносимо на перший ряд:
.grid > div:nth-child(2)
Можна використовувати: grid-row-start, grid-row-end або скорочено grid-row
