CSS Subgrid в продакшене: выравниваем вложенные формы и карточки без дублирования сеток

В кабинетах, checkout, SaaS-формах и дизайн-системах часто нужно, чтобы вложенные секции попадали в колонки общего layout. Типичная ошибка - копировать grid-template-columns в каждый компонент и потом ловить рассинхрон на адаптиве.

Где помогает subgrid

subgrid позволяет вложенному grid использовать треки непосредственного родителя по колонкам или строкам. Это полезно, когда форма разбита на группы, но label, input и action-кнопки должны стоять по одной визуальной сетке.

.settings {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) max-content;
  gap: 12px 16px;
}

.group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: inherit;
}

.group > input {
  grid-column: 2;
  min-width: 0;
}

Production-смысл

Так сетка описывается один раз в контейнере, а вложенные формы, строки настроек или карточки наследуют ее геометрию. Меньше CSS-дублей - меньше риска, что после изменения breakpoint'а кнопки, поля и подписи начнут визуально разъезжаться.

Хорошие кандидаты:
• большие формы настроек
• checkout и billing flows
• dashboard-строки со сложной вложенностью
• карточки в дизайн-системе с общей action-зоной

Ограничение, о котором часто забывают

subgrid работает только от непосредственного grid-контейнера, а сам элемент должен быть grid item и занимать нужный диапазон:

.card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

Недостаточно просто написать grid-template-columns: subgrid внутри любого компонента - без родительской grid-сетки он не даст ожидаемого выравнивания.

Практический паттерн

Используйте subgrid там, где цена дублирования сетки реальна, и держите предсказуемый fallback:

.form-group {
  display: grid;
  gap: 12px;
}

@supports (grid-template-columns: subgrid) {
  .form-group {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

Fallback может быть обычной вертикальной формой. Интерфейс не ломается, а современные браузеры получают точное выравнивание.

Вывод:
subgrid стоит тащить в продакшен не ради синтаксиса, а там, где он снижает дублирование CSS и повышает стабильность сложного layout.