CSS Subgrid: что это такое и зачем нужно
CSS Subgrid – это возможность CSS Grid Layout (уровень 2 спецификации), которая позволяет вложенным сеткам разделять сеточные треки (строки и столбцы) с родительским grid-контейнером. Проще говоря, элемент с display: grid внутри другого grid-контейнера может использовать размеры колонок и строк родительской сетки, а не создавать свою собственную независимую сетку. Раньше треки сетки родителя могли позиционировать только его прямых потомков, и любые заданные области или именованные линии не были доступны вложенным элементам. Вложенные grid-контейнеры работали автономно – их столбцы и строки никак не соотносились с треками родителя, что затрудняло выравнивание элементов разных уровней друг относительно друга. CSS Subgrid решает эту проблему: вместо определения новых треков для вложенной сетки мы можем указать значение subgrid для свойств grid-template-columns и/или grid-template-rows. В этом случае вложенная сетка наследует треки, заданные на родительском grid-контейнере. Это означает, что размеры колонок и строк у subgrid будут точно такими же, как у соответствующих колонок и строк родителя. Благодаря этому вложенный контент выравнивается идеально по сетке основного макета. Например, самая высокая из нескольких вложенных секций сможет задать высоту ряда для всех, устраняя “рваные” несостыковки в дизайне.
Зачем нужен subgrid: проблема выравнивания вложенных сеток
Представьте ситуацию: у вас есть несколько элементов, расположенных с помощью CSS Grid в колонках, и каждый из этих элементов сам по себе содержит внутреннюю сетку (например, карточки с заголовком, контентом и футером). Без subgrid каждая карточка создает свою собственную независимую сетку. Даже если внешний контейнер задаёт сетку из нескольких строк для выравнивания заголовков и футеров, вложенные элементы (карточки) не имеют доступа к этим строкам – они располагают свой контент по своей локальной сетке. В результате высота заголовков и футеров может отличаться, и по горизонтали они не выровнены между карточками (один выше, другой ниже). Разработчикам приходилось подгонять высоты вручную или избегать вложенных grid-структур, чтобы справиться с этой проблемой.
CSS Subgrid появился именно для решения таких случаев. С ним можно сделать одну общую сетку на весь макет и позволить дочерним элементам использовать те же самые колонки и строки. Если один из заголовков карточки выше остальных, он расширит соответствующий трек (строку) родительской сетки, и все остальные карточки автоматически получат заголовки той же высоты – ведь они находятся на том же самом сеточном ряду родителя. То же самое с футером: все футеры выровняются, потому что находятся на общей сеточной линии. Без subgrid добиться такого эффекта было практически невозможно без “костылей”. Теперь же, используя subgrid, вложенные элементы разделяют макет с родительским контейнером, оставаясь независимыми в остальном.
Важно отметить, что subgrid – это не отдельный тип отображения, а значение CSS-свойств: его можно применять к grid-template-columns и/или grid-template-rows у вложенного grid-контейнера. Браузерная поддержка subgrid появилась сравнительно недавно (в течение 2023 года функция стала доступна во всех основных браузерах), поэтому убедитесь, что целевая аудитория использует современные версии браузеров. Далее мы рассмотрим, чем subgrid отличается от обычного grid-контейнера, и пошагово научимся его применять.