Шпаргалка CSS Grid допомагає швидко згадати ключові властивості для побудови сіток, розміщення блоків і адаптивної верстки без хаотичних вкладень.
Що дає CSS Grid у щоденній верстці
CSS Grid дає двовимірну систему макета, де можна одночасно керувати рядками та колонками. Для сторінок із картками, галереями, дашбордами та складними секціями це зручніше за прості лінійні схеми на flex.
Головна перевага CSS Grid полягає в тому, що структура макета описується один раз, а елементи потім розкладаються по сітці без зайвих обгорток. Це спрощує адаптацію під різні екрани і робить код читабельнішим.
Базові властивості контейнера Grid
Основу CSS Grid складають кілька властивостей контейнера, які задають каркас сітки.
- display: grid; — вмикає Grid для батьківського блоку.
- grid-template-columns — задає кількість і ширину колонок.
- grid-template-rows — задає висоту рядків.
- gap — контролює відступи між елементами без маржинів.
- grid-auto-flow — визначає, як елементи заповнюють сітку автоматично.
Практичний стартовий варіант виглядає так: display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;. Така схема добре підходить для трьох рівних колонок із однаковими проміжками.
Як розміщувати елементи всередині сітки
Розміщення елементів у CSS Grid керується через лінії сітки або через готові скорочені властивості.
- grid-column — задає, скільки колонок займає елемент.
- grid-row — задає, скільки рядків займає елемент.
- grid-area — дозволяє прив’язати блок до конкретної ділянки макета.
- justify-items і align-items — вирівнюють вміст у клітинках.
Якщо елемент має зайняти ширшу зону, достатньо вказати йому, наприклад, grid-column: 1 / 3;. Перевірка проста: блок повинен розтягнутися рівно на потрібну кількість колонок без зсуву сусідніх елементів.
Адаптивна сітка без складних медіазапитів
Адаптивність CSS Grid часто будується на repeat(auto-fit, minmax()), коли сітка сама підлаштовує кількість колонок під ширину екрана.
Типовий шаблон виглядає так: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));. Він дозволяє карткам ставати в один ряд на вузькому екрані та переходити в кілька колонок на широкому.
Перевірити результат можна прямо в браузері: змініть ширину вікна та подивіться, чи елементи не ламають макет і чи залишаються читабельними. Якщо колонки стають занадто вузькими, підніміть мінімальне значення в minmax().
Типові помилки, які псують сітку
Шпаргалка CSS Grid буде кориснішою, якщо пам’ятати про кілька частих помилок.
- Занадто багато фіксованих значень у пікселях замість гнучких одиниць.
- Спроба вирішити весь макет лише через Grid, коли окремі внутрішні елементи зручніше вирівнювати flex.
- Відсутність gap, через що блоки виглядають злиплими.
- Надмірне ручне позиціювання кожного елемента без потреби.
Якщо сітка поводиться не так, як очікується, спочатку перевірте кількість колонок, значення gap і те, чи не перекривають елементи одне одного через невдалі діапазони рядків або колонок. Для складних макетів безпечніше почати з простої трьохколонкової структури і лише потім ускладнювати її.
CSS Grid найкраще працює там, де потрібна чітка структура сторінки, а не лише вертикальний потік елементів. Саме тому ця шпаргалка зручна і для швидкого старту, і для щоденної перевірки властивостей під час верстки.
