Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

CSS Subgrid: выравнивание карточек в сетке каталога

Когда дочерняя сетка наследует дорожки родителя и заголовки карточек встают в одну линию.

Изображение статьи: CSS Subgrid: выравнивание карточек в сетке каталога

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

Альтернатива — flex + min-height на блоках, но subgrid чище для витрин с переменной длиной заголовка.

- [subgrid — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) — Синтаксис и примеры.

- [CSS Subgrid — web.dev](https://web.dev/articles/css-subgrid) — Паттерны карточек.

---

## Fallback

При отсутствии subgrid используйте @supports (grid-template-columns: subgrid) и запасной flex-layout.

Не вкладывайте subgrid глубже двух уровней — отладка в DevTools усложняется.

#CSS#Grid#каталог

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.