Если вы когда-нибудь пытались собрать макет с кучей колонок, вложенных блоков и резиновых секций, то знаете, как это бывает. Флексы спасают, но иногда их не хватает. А тут ещё заказчик говорит: «Сделай как в Figma, только чтобы всё дышало». Знакомо? Тогда эта статья для вас. Мы разберём CSS Grid — инструмент, который превращает вёрстку из танцев с бубном в предсказуемый конструктор. Вы научитесь строить сложные сетки за пару минут и без головной боли.

Digital-студия WNDER

Почему Grid, а не только Flexbox

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

Grid отлично подходит для:

  • Каркасов страниц (шапка, контент, сайдбар, подвал).
  • Каталогов и карточек товаров.
  • Панелей управления и дашбордов.
  • Любых макетов, где нужно выравнивать элементы по сетке.

При этом Grid не отменяет Flexbox. Они отлично работают вместе: Grid — для общей структуры, Flexbox — для деталей внутри ячеек.

Основы: создаём первую сетку

Начнём с простого. Допустим, у нас есть контейнер с шестью карточками. Чтобы превратить его в сетку, достаточно задать контейнеру свойство display: grid и описать колонки.

<div class="grid">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <div class="card">Карточка 3</div>
  <div class="card">Карточка 4</div>
  <div class="card">Карточка 5</div>
  <div class="card">Карточка 6</div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Здесь repeat(3, 1fr) означает три колонки одинаковой ширины. 1fr — это «одна часть» свободного пространства. Если написать 2fr 1fr, то первая колонка будет в два раза шире второй. Просто и понятно.

А что с рядами? По умолчанию Grid сам создаёт строки под каждый элемент. Но вы можете управлять и ими:

.grid {
  grid-template-rows: 100px 200px;
}

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

Управляем размещением: как заставить элементы занимать нужные ячейки

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

<div class="grid">
  <div class="card card--big">Большая карточка</div>
  <div class="card">Обычная карточка</div>
  <div class="card">Обычная карточка</div>
  <div class="card">Обычная карточка</div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.card--big {
  grid-column: span 2; /* занимает две колонки */
}

А если нужно, чтобы элемент занимал две строки, используйте grid-row: span 2. Можно комбинировать: grid-column: span 2; grid-row: span 2; — получится блок размером 2x2.

Если вы хотите явно указать, где начинается элемент, используйте линии сетки. Нумерация линий начинается с 1. Например:

.card--special {
  grid-column: 2 / 4; /* от линии 2 до линии 4 */
  grid-row: 1 / 3;    /* от линии 1 до линии 3 */
}

Это даёт полный контроль. Вы буквально рисуете макет, как на бумаге.

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

Когда колонок много, цифры начинают путать. На помощь приходят именованные области. Вы задаёте шаблон сетки словами, а потом размещаете элементы по именам.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

Теперь HTML-структура элементарна:

<div class="page">
  <header class="header">Шапка</header>
  <aside class="sidebar">Сайдбар</aside>
  <main class="content">Контент</main>
  <footer class="footer">Подвал</footer>
</div>

Согласитесь, так гораздо понятнее. Вы видите структуру прямо в CSS. Это особенно удобно, когда макет сложный, а правки вносит другой разработчик.

Адаптивность без боли: как Grid реагирует на размер экрана

Grid отлично дружит с медиазапросами. Вы можете менять количество колонок или области в зависимости от ширины экрана. Но есть более элегантный способ — функция minmax() и ключевое слово auto-fit.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Что здесь происходит? minmax(250px, 1fr) означает, что колонка не может быть уже 250 пикселей, но может растягиваться на всё свободное место. А auto-fit автоматически создаёт столько колонок, сколько помещается на экране. Если экран узкий — одна колонка, широкий — пять. Никаких медиазапросов!

Это настоящий лайфхак для каталогов и списков карточек. Вы пишете одну строку — и сетка сама подстраивается под любые устройства.

Правило: если у вас повторяющиеся карточки — используйте repeat(auto-fit, minmax(…)). Это сэкономит часы времени и кучу нервов при адаптации.

Сложный макет: собираем всё вместе

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

.shop {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "filters products"
    "filters banner";
  gap: 20px;
}

.filters { grid-area: filters; }
.products { grid-area: products; }
.banner { grid-area: banner; }
<div class="shop">
  <aside class="filters">Фильтры</aside>
  <div class="products">Список товаров</div>
  <div class="banner">Рекламный баннер</div>
</div>

Фильтры растянуты на всю высоту, продукты — в основной колонке, баннер — под ними. Всё чётко и без костылей.

А если на мобильном нужно скрыть фильтры или поставить их ниже, просто меняем шаблон:

@media (max-width: 768px) {
  .shop {
    grid-template-columns: 1fr;
    grid-template-areas:
      "products"
      "filters"
      "banner";
  }
}

Готово. Мобильная версия — одна маленькая правка.

Типичные ошибки новичков

Первое время все наступают на одни и те же грабли. Вот несколько частых проблем и как их избежать.

Ошибка Как исправить
Элементы не встают в нужные ячейки Проверьте, что у контейнера есть display: grid, и что вы правильно указали grid-column или grid-row.
Сетка не адаптируется Используйте minmax() и auto-fit вместо фиксированных значений.
Пустые области Проверьте, не перекрываются ли области в grid-template-areas. Каждая ячейка должна быть заполнена.
Слишком много кода Помните о сокращениях: grid-column: 1 / 3 можно записать как grid-column: span 2.

Что в итоге

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

Помните: Grid не заменяет Flexbox, а дополняет его. Используйте их вместе, и тогда вёрстка станет настоящим удовольствием. Практикуйтесь на своих проектах, и скоро вы будете собирать макеты как конструктор.

Удачи в вёрстке!

Студия WNDER