Реальные интерфейсы устроены слоями: внутри карточки, которая сама стоит в сетке, тоже есть своя структура — картинка, заголовок, текст, кнопка. Это приводит к вложенным сеткам: grid внутри grid. Иногда вложенному элементу нужно выровняться по линиям внешней сетки — тогда на помощь приходит subgrid. И наконец, накопив опыт, важно уметь осознанно выбирать между Flexbox и Grid, ведь оба лежат перед вами как инструменты.

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

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как создавать вложенные сетки (grid внутри grid).
• Что делает subgrid и когда он полезен.
• Чем отличаются задачи для Flexbox и для Grid.
• Как сочетать оба инструмента в одном макете.

Ключевые термины

• Вложенная сетка — grid-контейнер, находящийся внутри ячейки другой сетки.
• subgrid — режим, при котором вложенная сетка наследует линии внешней.
• Одномерная раскладка — вдоль одной оси (задача Flexbox).
• Двумерная раскладка — по строкам и столбцам сразу (задача Grid).

Вложенные сетки

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

<div class="cards">
  <article class="card">
    <img src="service.jpg" alt="Услуга">
    <h3>Разработка</h3>
    <p>Создаём сайты под ключ.</p>
  </article>
</div>

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

.card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
}

Внешняя сетка .cards расставляет карточки в три столбца, а каждая .card — уже своя маленькая сетка, которая упорядочивает картинку, заголовок и текст по строкам. Вложенные сетки независимы: у внутренней свои столбцы, строки и gap. Так строятся сложные интерфейсы — уровнями.

Когда нужен subgrid

У обычной вложенной сетки есть особенность: её строки и столбцы никак не связаны с внешней. Если рядом стоят три карточки с заголовками разной длины, их внутренние строки могут не совпасть по высоте — кнопки внизу окажутся на разных уровнях. Решает это subgrid: он говорит вложенной сетке использовать линии родителя вместо собственных.

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

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

Flexbox или Grid: как выбрать

Теперь у вас два мощных инструмента раскладки, и полезно чётко понимать их зоны. Простое правило: одна ось — Flexbox, две оси — Grid.

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

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

/* Одна ось: ряд кнопок — Flexbox */
.toolbar {
  display: flex;
  gap: 12px;
}

/* Две оси: галерея — Grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

Как они работают вместе

Flexbox и Grid не соперники — в реальных проектах они постоянно сочетаются. Типичная связка: Grid задаёт крупный каркас страницы, а Flexbox раскладывает мелкие группы внутри ячеек.

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}

.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

Применяем в проекте

Наведём внутренний порядок в карточке услуги. Внешняя сетка уже расставляет карточки по столбцам — теперь сделаем содержимое каждой карточки отдельной сеткой, а её нижнюю строку с кнопкой выровняем Flexbox.

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Обновите страницу: карточки по-прежнему стоят в сетке из трёх столбцов, но внутри каждая аккуратно организована — заголовок сверху, текст растягивается в середине, а низ с ценой и кнопкой ровно выровнен. Мы совместили три уровня раскладки: внешний Grid, внутренний Grid и Flexbox в подвале карточки. Так устроены настоящие интерфейсы.

Частые ошибки

• Ожидание связи строк без subgrid.
  Обычная вложенная сетка не выравнивается по родителю; для этого нужен именно subgrid.
• Grid ради одной линии.
  Для простого ряда элементов Flexbox короче и уместнее, чем сетка из одного столбца или строки.
• Flexbox ради двумерного макета.
  Галерею со строками и столбцами на Flexbox приходится городить вложенностью; Grid решает это напрямую.
• Выбор инструмента «навсегда».
  В одном макете нормально сочетать Grid и Flexbox — на разных участках разные задачи.

Итоги

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

Прекрасная работа! В следующем разделе мы займёмся позиционированием: научимся выводить элементы из общего потока, накладывать их друг на друга и закреплять на экране — от position: relative до «прилипающих» шапок и слоёв по z-index.