CSS Subgrid на реальных примерах: выравнивание вложенных карточек

Долгое время CSS Grid позволял нам создавать сложные макеты для родительских контейнеров, но как только дело доходило до вложенных элементов, магия заканчивалась. Вложенные элементы жили своей жизнью, не подозревая о структуре родительской сетки. CSS Subgrid меняет правила игры, позволяя дочерним элементам «наследоваться» от сетки родителя. Это особенно актуально при создании сеток из карточек, где заголовки, изображения и текстовые блоки должны быть идеально выровнены по горизонтали во всех колонках одновременно.

Для того чтобы эффективно использовать возможности вложенных сеток, необходимо иметь прочный фундамент в основах раскладки. Если вы только начинаете свой путь, рекомендуем изучить Объяснение CSS Grid Layout: Полное руководство для начинающих веб-разработчиков, чтобы понимать принципы работы линий и дорожек.

Проблема: Разная высота внутреннего контента

Представьте типичную секцию с карточками товаров или услуг. Каждая карточка содержит заголовок, описание и кнопку. Если в одном заголовке два слова, а в другом — пять, карточки будут выглядеть неопрятно. Заголовки закончатся на разном уровне, и следующие за ними блоки описания «поплывут».

Раньше эту проблему решали с помощью фиксированной высоты (min-height), что плохо для адаптивности, или через JavaScript, который вычислял самую высокую карточку и задавал высоту остальным. Оба метода являются «костылями». CSS Subgrid решает это на уровне движка рендеринга браузера.

Как работает Subgrid

Subgrid — это значение для свойств grid-template-rows или grid-template-columns. Когда мы задаем это значение дочернему элементу сетки, он перестает формировать собственную независимую сетку и начинает использовать линии родительского контейнера.

Чтобы понять контекст развития технологий раскладки, полезно прочитать материал Понимание CSS Grid и Flexbox в 2026 году, где разбираются современные подходы к выбору инструментов для верстки.

Практическая реализация выравнивания карточек

Рассмотрим структуру, где родитель — это контейнер .grid-container, а ребенок — .card. Внутри карточки есть три элемента: заголовок, текст и подвал.

Для начала настроим родительский контейнер. Мы определим, что каждая карточка занимает три строки в родительской сетке. Для этого используем свойство grid-auto-rows или явно зададим структуру строк. Основная хитрость заключается в том, что карточка должна растягиваться на несколько строк родителя с помощью grid-row: span 3.

Затем для самой карточки мы применяем следующие стили:

display: grid; — превращаем карточку в грид-контейнер.
grid-template-rows: subgrid; — говорим карточке взять настройки строк у родителя.
grid-row: span 3; — указываем, что карточка занимает три строки внешней сетки.

Теперь, если заголовок в первой карточке станет выше и растянет первую строку родительской сетки, заголовки во всех остальных карточках в этом ряду также автоматически увеличат свое пространство. Все элементы внутри карточек (заголовки к заголовкам, описания к описаниям) будут идеально выровнены по одной линии.

Преимущества использования Subgrid

Использование этого подхода дает несколько ключевых преимуществ для современного UI-дизайна:

Идеальный визуальный ритм: Все однотипные элементы внутри разных карточек выровнены по горизонтали, что создает ощущение порядка и профессионального дизайна.
Отсутствие лишнего кода: Вам не нужно писать сложные медиа-запросы или использовать магические числа в отступах.
Адаптивность: При изменении количества колонок (например, на мобильных устройствах) Subgrid продолжает работать корректно, адаптируясь под новые размеры родительских дорожек.

Хотя поддержка Subgrid в современных браузерах уже достаточно широкая, всегда стоит проверять совместимость, если вы поддерживаете старые версии браузеров. Однако для современных проектов это стандарт де-факто при создании сложных интерфейсов.

Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь!