Если вы когда-нибудь пытались собрать сложную страницу на флоатах или флексах, то знаете: это как собирать шкаф из ИКЕА без инструкции — вроде все детали на месте, но в конце остаются лишние болты и кривые полки. CSS Grid — это тот самый ключ на 13, который решает все проблемы. В этой статье я покажу, как использовать Grid на полную катушку: от именованных линий до вложенных сеток. Без воды, только практика.

Digital-студия WNDER

Почему Grid — это не страшно, а удобно

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

Многие боятся Grid из-за обилия свойств. Но на деле нужно знать всего несколько ключевых понятий:

  • grid-template-columns — задает количество и ширину столбцов.
  • grid-template-rows — задает количество и высоту строк.
  • grid-column и grid-row — управляют позицией элемента.
  • gap — отступы между ячейками.

Этого достаточно, чтобы собрать 90% макетов. Остальное — дело техники.

Именованные линии и области: макет становится читаемым

Когда сетка состоит из 12 колонок, держать в голове номера линий сложно. На помощь приходят именованные линии. Вместо grid-column: 1 / 3 вы пишете grid-column: main-start / main-end. Согласитесь, так понятнее.

Пример: делаем каркас блога с шапкой, подвалом, контентом и сайдбаром.

.layout {
  display: grid;
  grid-template-columns: [main-start] 1fr [sidebar-start] 300px [main-end];
  grid-template-rows: [header-start] auto [header-end] 1fr [footer-start] auto [footer-end];
}

.header {
  grid-column: main-start / main-end;
  grid-row: header-start / header-end;
}

.content {
  grid-column: main-start / sidebar-start;
  grid-row: header-end / footer-start;
}

.sidebar {
  grid-column: sidebar-start / main-end;
  grid-row: header-end / footer-start;
}

.footer {
  grid-column: main-start / main-end;
  grid-row: footer-start / footer-end;
}

Теперь при взгляде на CSS сразу видно, где какой блок. А если нужно поменять местами сайдбар и контент — просто меняете линии в grid-column. Никаких перестановок в HTML.

Еще удобнее — grid-template-areas. Вы задаете сетку словами, как в ASCII-арте:

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
}

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

Имена областей должны быть уникальными, а пустые ячейки обозначаются точкой. Переставить блоки — просто поменяйте строки в grid-template-areas. Многие называют этот подход «макет на салфетке» — потому что вы буквально рисуете структуру.

Авто-размещение и плотная упаковка: когда элементов много

Бывает, что контента больше, чем ячеек. Например, галерея изображений или список карточек. Grid сам расставит элементы по порядку, но иногда остаются дырки. Чтобы их избежать, используйте grid-auto-flow: dense.

Это свойство заставляет Grid заполнять пустоты, даже если элемент должен идти дальше по порядку. Карточки становятся разной высоты, и сетка выглядит как мозаика — без пустых зон.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 10px;
}

.gallery__item--wide {
  grid-column: span 2;
}

Обратите внимание на repeat(auto-fill, minmax(200px, 1fr)) — это автоматическая адаптивность. Grid сам решает, сколько колонок поместится, и растягивает их на всю ширину. А grid-auto-rows задает высоту строк, которые создаются автоматически.

Если элемент должен занимать несколько ячеек — используйте span. Например, grid-column: span 2 растянет элемент на две колонки. Идеально для выделяющихся карточек.

Вложенные Grid и микс с Flexbox: когда нужно всё сразу

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

Вложенные сетки — это когда внутри элемента, который сам является ячейкой Grid, вы создаете еще одну сетку. Так можно строить сложные структуры без лишних оберток.

.card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 15px;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

В примере карточка — это Grid с аватаркой и текстом. А внутри текстового блока — флекс, чтобы прижать кнопку к низу. Такой подход экономит время и нервы.

Важно: вложенный Grid не обязан иметь те же колонки, что и родительский. Он независим. Это как матрешка — каждая внутри может быть своего размера.

Практические советы и типичные ошибки

Давайте разберем частые грабли, на которые наступают новички.

  • Не задано свойство grid-template-columns — если его нет, Grid создает одну колонку. Это частая ошибка: элементы выстраиваются в столбик, хотя вы ждали сетку.
  • Перепутаны строки и столбцы — помните: grid-template-columns — это ширина колонок, а grid-template-rows — высота строк. Легко перепутать, когда спешишь.
  • Забыли про gap — без него элементы слипаются. Добавьте gap: 20px и дышать станет легче.
  • Использование minmax() без auto-fill — если вы хотите адаптивность, всегда комбинируйте: repeat(auto-fill, minmax(200px, 1fr)).
Правило: всегда начинайте с grid-template-columns, задайте gap и только потом позиционируйте элементы. Это убережет от 50% ошибок.

Еще один лайфхак: используйте grid-template-columns: repeat(12, 1fr) как универсальную сетку. Затем элементы растягивайте через grid-column: span X. Так вы получите гибкую 12-колоночную систему, как в Bootstrap, но без библиотек.

И не бойтесь экспериментировать. Grid — это мощный инструмент, который прощает ошибки. Если что-то не получается, откройте DevTools и посмотрите, как браузер видит сетку. Там есть визуализация линий и областей — очень помогает.

Что в итоге

CSS Grid — это не магия, а просто инструмент. Освоив его, вы перестанете бояться сложных макетов. Используйте именованные линии для читаемости, grid-template-areas для наглядности, auto-flow: dense для галерей и не забывайте про вложенные сетки. И всегда задавайте gap.

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

Студия WNDER