Три карточки в сетке. У каждой — заголовок, описание и кнопка. Заголовки разной длины, и кнопки разъезжаются по разной высоте. Сетка выглядит рваной.

Что с этим делали раньше? Считали высоту заголовков через JavaScript и проставляли min-height. Или мирились. Теперь хватает одной строки CSS — grid-template-rows: subgrid на каждой карточке. Карточки наследуют строки родительской сетки, и одинаковые блоки соседних карточек выстраиваются по общим линиям.

Внутри статьи — рабочая демка, разбор синтаксиса для строк и столбцов и сравнение с обычным Grid. Firefox с 2019-го, Chrome 117+, Safari 16+ — уже в baseline. #css #subgrid

🔔 Читать статью