Subgrid: расширенные возможности Grid для вложенных сеток
CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.
Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.
Пример кода
В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.
Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.
#css
CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.
Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.
Пример кода
<div class="wrapper">
<header>Заголовок</header>
<section class="content">
<article>
<h2>Карточка 1</h2>
<p>Описание...</p>
</article>
<article>
<h2>Карточка 2</h2>
<p>Описание...</p>
</article>
</section>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* три колонки */
gap: 1rem;
}
.content {
display: grid;
grid-template-columns: subgrid; /* наследуем родительскую сетку */
grid-column: 1 / -1; /* растягиваемся на всю ширину */
gap: 1rem;
}
.content article {
background: #f3f3f3;
padding: 1rem;
}В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.
Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.
#css