Как CSS subgrid спасает карточки на сайтах

  • 2 мая 2026

CSS

Евгений Шкляр

Grid Layout решил много задач с раскладкой, но одна проблема долго оставалась без решения. Представьте три карточки в сетке. У каждой — заголовок, описание и кнопка. Высота заголовков разная: в одной карточке текст длиннее, в другой короче. В итоге кнопки стоят на разной высоте, и сетка выглядит неаккуратно.

Раньше это решали через JavaScript: вычисляли высоту заголовков и выставляли min-height. Или просто мирились с несовершенством.

Subgrid позволяет дочернему элементу участвовать в сетке родителя. Карточка занимает несколько строк родительской сетки — и все её внутренние блоки выравниваются по общим линиям.

Попробуйте сами

Базовый курс HTML
Научитесь создавать структуру страниц и работать с тегами.
CSS: от основ до анимаций и сложных раскладок
Стилизация, Flexbox, Grid и многое другое для уверенной вёрстки.
JavaScript
Интерактивность, работа с DOM и основы асинхронного кода.
Кнопки на разной высоте

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

Сначала настраиваем родительскую сетку так, чтобы каждая карточка занимала несколько строк:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* строки создаются автоматически по содержимому */
}

Затем говорим карточке, что она занимает три строки и хочет унаследовать их разметку от родителя:

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* главное слово */
}

Теперь внутренние блоки карточки — заголовок, текст и кнопка — автоматически выравниваются по строкам родительской сетки вместе со всеми соседними карточками.

Subgrid и по столбцам тоже

Subgrid работает не только для строк, но и для столбцов. Например, если нужно, чтобы вложенные элементы выравнивались по тем же колонкам, что и их сосед:

.card {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* наследуем колонки родителя */
}

Поддержка в браузерах

Subgrid появился в Firefox ещё в 2019 году, но долго ждал остальных. Сейчас он работает в Chrome 117+, Safari 16+, Firefox 71+. Проверить актуальную поддержку можно на caniuse.com.

Что запомнить

Subgrid позволяет вложенным элементам выравниваться по сетке родителя. Особенно полезно для карточек, где нужно, чтобы одинаковые блоки — заголовки, описания, кнопки — стояли на одной линии независимо от объёма содержимого.

Если только начинаете разбираться с Grid — почитайте про грид-раскладку в CSS и адаптивные сетки.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники