Долгое время у Grid Layout была одна проблема: дочерние элементы (внуки основного контейнера) не могли участвовать в сетке родителя. CSS Subgrid это исправил.
В чем была проблема?
Представьте карточки товаров. Внутри каждой есть заголовок, описание и кнопка. Если в одной карточке описание длиннее, оно растягивает карточку, но заголовки и кнопки в соседних карточках перестают идти «в одну линию».
Как работает Subgrid?
Теперь мы можем сказать дочернему элементу: «Используй сетку своего родителя».
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
display: grid;
grid-template-rows: subgrid; /* Магия здесь! */
grid-row: span 3; /* Карточка занимает 3 строки родительской сетки */
}Почему это круто?
Идеальное выравнивание: Все заголовки, тексты и футеры во всех карточках всегда будут на одном уровне.
Меньше кода: Вам не нужно подбирать фиксированную высоту или использовать сложные хаки.
Гибкость: Сетка становится по-настоящему целостной.
Поддержка: На сегодняшний день Subgrid поддерживается всеми современными браузерами (Chrome 117+, Firefox, Safari).
#css