Что такое subgrid и какую проблему он решает?

Subgrid позволяет вложенной сетке использовать линии и размеры треков родительской сетки, а не создавать собственные.

Проблема

Карточки лежат в сетке, у каждой есть заголовок, текст и кнопка. Содержимое у карточек разной длины, поэтому заголовки и кнопки оказываются на разных высотах: у каждой карточки свои строки.

Решение

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* заголовок, текст, кнопка */
  gap: 16px;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* строки родителя */
}

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

Поддержка

Subgrid работает во всех современных браузерах. Для старых можно оставить обычную сетку как запасной вариант.

Коротко для собеседования

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