Совершенно новые макеты с CSS Subgrid

CSS Grid изначально позволял участвовать в раскладке только прямым потомкам, но "Subgrid" расширяет эту возможность на вложенные элементы в дереве DOM, открывая совершенно новые горизонты для создания пользовательских интерфейсов. Рассмотрим базовый пример: макет портфолио, где изображения должны быть сгруппированы в семантически корректный список <ul><li>. Без Subgrid, добавление <ul> нарушает сетку, помещая весь список в одну ячейку, так как <li> не являются прямыми потомками главной сетки.

С помощью Subgrid эта проблема решается: родительская сетка распространяется на элемент <ul>, а затем <ul> объявляется как новая сетка, которая наследует определения строк и столбцов родительской сетки.

.grid {
  display: grid;
  grid-template-columns: 35% 1fr 1fr 1fr;
}

.grid ul {
  grid-row: span 2; /* ul занимает 2 строки */
  grid-column: span 3; /* ul занимает 3 столбца */
  display: grid;
  grid-template-rows: subgrid; /* ul наследует строки от родителя */
  grid-template-columns: subgrid; /* ul наследует столбцы от родителя */
}

Это позволяет каждому <li> участвовать в раскладке родительской сетки, решая проблему вложенности и сохраняя семантику. Однако истинная мощь Subgrid проявляется в более сложных сценариях, таких как динамическое выравнивание элементов в карточках портфолио. Например, в макете карточек с изображениями и текстом, Subgrid позволяет выравнивать колонки текста и изображений между разными карточками, даже если их содержимое имеет разную длину.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 2fr 1fr); /* Родитель определяет общую структуру */
}
.grid article {
  grid-column: span 2; /* Каждая article занимает 2 родительских столбца */
  display: grid;
  grid-template-columns: subgrid; /* Article наследует столбцы родителя */
}

Родительская сетка определяет общую структуру, а каждая <article> наследует эти определения, позволяя сетке динамически реагировать на изменения контента, оптимально распределяя пространство и обеспечивая единообразие между соседними элементами. Тем не менее, Subgrid имеет свои особенности: необходимо явно резервировать количество строк, которые будет занимать подсетка, например, grid-row: span X;, иначе весь контент будет сгруппирован в одну строку. Кроме того, индексы линий подсетки сбрасываются (начинаются с 1), а не наследуют родительские, и Subgrid несовместим с текущими реализациями адаптивных сеток, использующих repeat(auto-fill, minmax(X, 1fr)).

Для поддержки старых браузеров, где Subgrid еще не поддерживается (примерно 90% по данным caniuse на ноябрь 2025), можно использовать @supports not (grid-template-columns: subgrid) для предоставления альтернативных макетов. Subgrid — это мощный инструмент, который позволяет создавать сложные, отзывчивые и семантически корректные макеты, способные адаптироваться к контенту, и его можно внедрять постепенно.

Оригинал статьи: Brand New Layouts with CSS Subgrid