Когда-то вёрстка напоминала игру в тетрис: подбираешь флоаты, мучаешься с отрицательными margin'ами, а результат всё равно разваливается на мобильных. Но пришёл CSS Grid — и макеты, которые раньше требовали танцев с бубном, теперь собираются за пару строк. Если вы устали от хрупких конструкций и хотите строить по-настоящему сложные интерфейсы — эта статья для вас.

Digital-студия WNDER

Что такое CSS Grid и зачем он нужен

CSS Grid — это модуль CSS, который позволяет создавать двухмерные сетки: одновременно управлять и строками, и колонками. В отличие от Flexbox, который работает только в одном направлении, Grid даёт полный контроль над всей областью. Представьте, что вы раскладываете плитку на полу: вы заранее знаете, сколько плиток в ряду и сколько рядов. Grid — это та самая разметка, только для веб-страницы.

Главная фишка — вы описываете структуру, а браузер сам расставляет элементы. Никаких сдвигов, никаких сюрпризов. Это идеально для сложных макетов: дашборды, админки, галереи, лендинги с нестандартной структурой.

Правило: если макет плоский и одномерный — используйте Flexbox. Как только появляются строки и колонки одновременно — берите Grid. Не пытайтесь натянуть Flexbox на сложную сетку, это приведёт к боли.

Базовые концепции: контейнер, элементы, линии

Прежде чем строить, разберёмся с терминами. У вас есть контейнер (родительский элемент), в котором лежат элементы (дети). Вы задаёте контейнеру свойство display: grid — и он становится сеткой. Дальше определяете колонки и строки через grid-template-columns и grid-template-rows.

Каждый элемент можно размещать по линиям. Линии нумеруются с 1 — это границы сетки. Например, элемент может занимать колонки с 1 по 3, а строки со 2 по 4. Это даёт невероятную гибкость: вы можете переставлять блоки местами без изменения HTML.

Вот простейший пример — три колонки одинаковой ширины:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Единица fr — это доля свободного пространства. 1fr 1fr 1fr означает, что колонки равны. Если поставить 2fr 1fr, то первая колонка будет вдвое шире второй.

Строим сложный макет: шаг за шагом

Допустим, нам нужен типичный дашборд: шапка, боковая панель, основной контент, ещё одна панель и подвал. На Grid это делается за пять минут.

Разметка HTML:

<div class="dashboard">
  <header class="header">Шапка</header>
  <aside class="sidebar-left">Левая панель</aside>
  <main class="content">Основной контент</main>
  <aside class="sidebar-right">Правая панель</aside>
  <footer class="footer">Подвал</footer>
</div>

Теперь CSS:

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 10px;
}

.header {
  grid-column: 1 / -1; /* занимает всю ширину */
}

.sidebar-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.sidebar-right {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.footer {
  grid-column: 1 / -1;
}

Шапка и подвал растянуты на всю ширину, панели по бокам, контент по центру. И всё это работает на любом экране. Хотите адаптивность? Просто меняете grid-template-columns через медиазапросы.

Продвинутые приёмы: зоны и автоматическое размещение

Когда макет становится слишком сложным, ручная расстановка по линиям надоедает. Тут на помощь приходят именованные зоны — grid-template-areas. Вы задаёте сетке имена, а потом просто указываете, какой элемент куда ставить.

Пример:

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left content right"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar-left { grid-area: left; }
.content { grid-area: content; }
.sidebar-right { grid-area: right; }
.footer { grid-area: footer; }

Красиво и читаемо. А ещё есть автоматическое размещение: если не указывать позицию, браузер сам расставит элементы по порядку. Это удобно для карточек товаров или плиток галереи.

Полезные свойства для сложных случаев:

Свойство Описание Пример
grid-auto-flow Управляет автоматическим размещением grid-auto-flow: dense; — заполняет пустоты
grid-auto-rows Задаёт размер строк, созданных автоматически grid-auto-rows: 100px;
align-items Выравнивание элементов по вертикали align-items: stretch; (по умолчанию)
justify-items Выравнивание по горизонтали justify-items: center;

Частые ошибки и как их избежать

Первая ошибка — забыть про gap. Если не задать отступы, элементы будут прилипать друг к другу. Всегда используйте gap вместо старых margin'ов.

Вторая — путаница с fr и процентами. fr работает только внутри grid-контейнера, а проценты зависят от родителя. Для адаптивности лучше использовать fr или комбинацию с minmax().

Третья — игнорирование вложенных grid. Не бойтесь делать grid внутри grid. Например, в ячейке основного контента можно создать ещё одну сетку для карточек. Это нормальная практика.

Лайфхак: используйте grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — и получите адаптивную сетку карточек без единого медиазапроса. Элементы сами переносятся на новую строку, если не хватает места.

Инструменты для отладки

DevTools в браузере — ваш лучший друг. В Chrome и Firefox есть специальный режим просмотра grid: открываете инспектор, выбираете элемент с display: grid — и видите все линии, зоны и треки. Это сильно ускоряет работу.

Также полезно использовать CSS-переменные для хранения размеров сетки. Например:

:root {
  --sidebar-width: 250px;
  --gap-size: 20px;
}

.dashboard {
  grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
  gap: var(--gap-size);
}

Так вы сможете менять все размеры в одном месте без поиска по файлу.

Что в итоге

CSS Grid — это мощный инструмент, который экономит часы вёрстки и делает макеты стабильными. Освоив базовые концепции — колонки, строки, зоны и автоматическое размещение, — вы сможете создавать сложные интерфейсы без костылей. Главное — практиковаться и не бояться экспериментировать.

Начните с простого: возьмите свой текущий проект и попробуйте переделать один из макетов на Grid. Уверен, вы почувствуете разницу уже через час.

Студия WNDER