Когда внутри одной ячейки CSS Grid находится ещё один блок со своей внутренней сеткой, у него по умолчанию нет способа выровняться по линиям родительской сетки — вложенный Grid живёт по собственным правилам, независимо от размеров ячеек снаружи, даже если визуально хотелось бы обратного.
Subgrid, значение свойства grid-template-columns или grid-template-rows, решает именно эту задачу — вложенная сетка наследует линии разметки от родительской, а не создаёт свои собственные с нуля. Это особенно полезно, когда несколько карточек рядом должны выравнивать свои внутренние элементы по одной сетке.
Классический пример — ряд карточек, у каждой из которых заголовок, описание и кнопка. Без subgrid высота заголовков в разных карточках может отличаться из-за разной длины текста, и тогда описание и кнопка ниже сдвигаются не единообразно. С subgrid все карточки выравнивают внутренние элементы по общим линиям.
До появления subgrid для похожего результата приходилось либо вручную выставлять одинаковую высоту заголовков через JavaScript, либо идти на компромисс с менее аккуратным визуальным результатом, где элементы карточек не выровнены по одной линии между собой.
Поддержка subgrid в браузерах постепенно становится достаточно широкой для практического использования, хотя для критичных к выравниванию интерфейсов по-прежнему стоит проверить актуальную ситуацию с поддержкой перед тем, как полагаться на неё как на единственное решение.
Subgrid — хороший пример того, как CSS постепенно закрывает задачи, которые раньше требовали JavaScript или компромиссов в вёрстке, делая разметку сложных выровненных структур более предсказуемой и менее зависимой от скриптов.
Подробнее о subgrid и практических сценариях его применения рассказано в статье про subgrid на MDN.
