New layouts with CSS Subgrid
CSS Subgrid расширяет возможности CSS Grid, позволяя не только прямым детям контейнера участвовать в сетке, но и элементам глубже в DOM-дереве. Изначально Grid ограничивался плоской структурой, что вынуждало жертвовать семантикой HTML ради layout'а. Subgrid открывает новые UI-возможности, упрощая сложные дизайны без хаков.
Пример: портфолио в 4×2 сетке (grid-template-columns: 35% 1fr 1fr 1fr), где header занимает строки 1–3 слева, а справа — 6 изображений. Без subgrid изображения приходится выносить на уровень контейнера, нарушая семантику (нет списка для коллекции). С subgrid контейнер изображений (например, <ul>) наследует линии родительской сетки via display: grid; grid-template-columns: subgrid;, сохраняя структуру и доступность. Упомянуты gotchas: резервирование места, вложенные сетки, несовместимость с fluid grids, поддержка старых браузеров (@supports).