Subgrid и сложные сетки

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

Причина не в ошибке. Каждая карточка — своя сетка, со своими строками. Родительский грид знает только про колонки, а что происходит внутри карточек, ему безразлично.

subgrid отменяет эту изоляцию: карточка перестаёт заводить свои строки и встраивается в строки родителя.

Нужны две вещи. Родитель объявляет строки, а ребёнок занимает их все сразу и говорит, что берёт строки родителя.

1.cards {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  /* Четыре строки: заголовок, текст, цена, кнопка */5  grid-template-rows: auto 1fr auto auto;6  gap: 16px;7}89.card {10  display: grid;11  /* Карточка растягивается на все четыре строки родителя… */12  grid-row: span 4;13  /* …и берёт их вместо своих */14  grid-template-rows: subgrid;15}

<div class="cards">  <article class="card">    <h3>Эспрессо</h3>    <p>Двойная порция.</p>    <p class="price">120 ₽</p>    <button type="button">Заказать</button>  </article>​  <article class="card">    <h3>Раф на кокосовом молоке</h3>    <p>Мягкий сладковатый напиток для тех, кому латте кажется резким.</p>    <p class="price">240 ₽</p>    <button type="button">Заказать</button>  </article>​  <article class="card">    <h3>Фильтр</h3>    <p>Зерно из Эфиопии.</p>    <p class="price">180 ₽</p>    <button type="button">Заказать</button>  </article></div>

.cards {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: auto 1fr auto auto;  gap: 12px;}​.card {  display: grid;  grid-row: span 4;  /* Убери эту строку — и кнопки разъедутся */  grid-template-rows: subgrid;  gap: 6px;  padding: 12px;  background: #f5f5fa;  border-radius: 10px;}​.card h3 { margin: 0; font-size: 15px; }.card p { margin: 0; font-size: 13px; color: #5b6070; }.price { font-weight: 700; color: #16181d !important; }​button {  padding: 8px;  font: inherit;  font-size: 13px;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 8px;}

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

1.form {2  display: grid;3  /* Колонка подписей ровно по самой длинной из них */4  grid-template-columns: auto 1fr;5  gap: 12px;6}78.form__row {9  display: grid;10  grid-column: span 2;11  grid-template-columns: subgrid;12  align-items: center;13}

В большом макете считать номера линий невозможно: добавил колонку — и все числа поехали. Линиям и областям дают имена.

1.page {2  display: grid;3  grid-template-columns:4    [full-start] minmax(16px, 1fr)5    [content-start] minmax(0, 1100px) [content-end]6    minmax(16px, 1fr) [full-end];7}89/* Обычный блок живёт в колонке контента */10.page > * {11  grid-column: content;12}1314/* А этот разворачивается во всю ширину экрана */15.hero {16  grid-column: full;17}

Приём называют «полноширинный прорыв»: сетка страницы задаётся один раз, и любой блок может выйти на всю ширину одной строкой, без отрицательных отступов и обёрток.

Пара имён content-start и content-end автоматически даёт область content — писать grid-column: content достаточно.

Две функции, без которых большие сетки не собираются. minmax() задаёт вилку: «не уже такого, но тянись до такого». repeat() с ключевыми словами позволяет не указывать количество колонок вообще.

Разница между auto-fit и auto-fill сбивает с толку всех, а видна только когда элементов мало.

Правило выбора простое: если хочешь, чтобы неполный ряд растянулся, — auto-fit. Если карточки должны сохранять ширину и прижиматься к началу, — auto-fill.

1@layer components {2  .catalog {3    display: grid;4    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));5    /* Строки перечислены явно — иначе subgrid не к чему привязать */6    grid-auto-rows: auto 1fr auto auto;7    gap: 20px;8  }910  .product {11    display: grid;12    grid-row: span 4;13    grid-template-rows: subgrid;14    gap: 8px;15  }1617  /* Длинные названия больше не ломают ряд:18     кнопки и цены стоят на одной линии во всех карточках */19  .product__title { margin: 0; font-size: 1rem; }20  .product__price { align-self: end; font-weight: 700; }21}

Сетку почти невозможно отлаживать по коду — её нужно видеть. В инструментах разработчика рядом с элементом, у которого стоит display: grid, появляется значок grid. Включи его.

Браузер нарисует поверх страницы линии сетки с номерами и именами. Сразу видно, где линия на самом деле проходит, почему блок занял не ту ячейку и куда делось пустое место. У вложенного subgrid линии продолжают родительские — это лучший способ убедиться, что подчинение действительно включилось.

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

В CSS она обсуждается и уже есть в некоторых браузерах за флагом или в экспериментальном виде, но единого решения пока нет: спецификация менялась несколько раз. На неё сегодня не закладываются — если такая раскладка нужна в работе, берут колоночный вариант через columns или скрипт.

• Когда хватает align-items: stretch. Если внутри карточки один-два элемента, ровные кнопки получаются обычным флексом с margin-top: auto. Subgrid — для случая, когда линий несколько.
• Для двухуровневой вложенности «на всякий случай». Subgrid связывает ребёнка с родителем жёстко: поменяешь строки у родителя — придётся править и grid-row: span у всех детей.
• Ради выравнивания текста внутри одной карточки. Это задача обычной сетки, лишний уровень тут ничего не даст.

1/* База: работает всюду, кнопки прижаты вниз */2.card { display: flex; flex-direction: column; }3.card__btn { margin-top: auto; }45/* Улучшение: строки выравниваются между карточками */6@supports (grid-template-rows: subgrid) {7  .card {8    display: grid;9    grid-row: span 4;10    grid-template-rows: subgrid;11  }12}

<div class="cards">  <article class="card">    <h3>Эспрессо</h3>    <p>Двойная порция.</p>    <p class="price">120 ₽</p>    <button type="button">Заказать</button>  </article>​  <article class="card">    <h3>Раф на кокосовом молоке</h3>    <p>Мягкий сладковатый напиток для тех, кому обычный латте кажется слишком резким.</p>    <p class="price">240 ₽</p>    <button type="button">Заказать</button>  </article>​  <article class="card">    <h3>Фильтр</h3>    <p>Зерно из Эфиопии.</p>    <p class="price">180 ₽</p>    <button type="button">Заказать</button>  </article></div>

.cards {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 12px;  /* Здесь не хватает строк */}​.card {  display: grid;  gap: 6px;  padding: 12px;  background: #f5f5fa;  border-radius: 10px;  /* А здесь — подчинения строкам родителя */}​.card h3 { margin: 0; font-size: 15px; }.card p { margin: 0; font-size: 13px; color: #5b6070; }.price { font-weight: 700; }​button {  padding: 8px;  font: inherit;  font-size: 13px;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 8px;}

1<div class="cards">2  <article class="card">3    <h3>Эспрессо</h3>4    <p>Двойная порция.</p>5    <p class="price">120 ₽</p>6    <button type="button">Заказать</button>7  </article>89  <article class="card">10    <h3>Раф на кокосовом молоке</h3>11    <p>Мягкий сладковатый напиток для тех, кому обычный латте кажется слишком резким.</p>12    <p class="price">240 ₽</p>13    <button type="button">Заказать</button>14  </article>1516  <article class="card">17    <h3>Фильтр</h3>18    <p>Зерно из Эфиопии.</p>19    <p class="price">180 ₽</p>20    <button type="button">Заказать</button>21  </article>22</div>

1.cards {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  grid-template-rows: auto 1fr auto auto;5  gap: 12px;6}78.card {9  display: grid;10  grid-row: span 4;11  grid-template-rows: subgrid;12  gap: 6px;13  padding: 12px;14  background: #f5f5fa;15  border-radius: 10px;16}1718.card h3 { margin: 0; font-size: 15px; }19.card p { margin: 0; font-size: 13px; color: #5b6070; }20.price { font-weight: 700; }2122button {23  padding: 8px;24  font: inherit;25  font-size: 13px;26  color: #fff;27  background: #6544e0;28  border: 0;29  border-radius: 8px;30}