subgrid
Значение `grid-template-columns` и `grid-template-rows`, с которым вложенная сетка использует дорожки родительской сетки.
Синтаксис
grid-template-columns: subgrid;Параметры
| Параметр | Тип | Описание |
|---|---|---|
| subgrid | keyword | Пишется вместо списка дорожек. Сам элемент должен быть ячейкой сетки и занимать дорожки, которые он заимствует. |
Примеры
Карточки, у которых заголовки, тексты и кнопки выровнены по строке при любой длине текста:
<style>
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: 6px; padding: 8px; border: 1px solid #ccc; border-radius: 8px;
}
.card h3 { margin: 0; }
.card p { margin: 0; }
</style>
<div class="cards">
<div class="card"><h3>Basic</h3><p>Short text.</p><button>Buy</button></div>
<div class="card"><h3>Pro plan for teams</h3><p>A much longer description that wraps onto several lines.</p><button>Buy</button></div>
<div class="card"><h3>Max</h3><p>Medium text here.</p><button>Buy</button></div>
</div>Примечания
Без subgrid каждая карточка — отдельная сетка, и кнопки оказываются на разной высоте. С ним строки принадлежат внешней сетке, и все карточки делят их между собой. Не забудьте grid-row: span 3 (или grid-column): элемент должен занимать дорожки, которые заимствует. Поддерживается всеми актуальными браузерами с 2023 года.
См. также
- grid-template-columns — Количество и ширина колонок сетки.
- grid-template-rows — Количество и высота рядов сетки.
- grid-row — Какие ряды занимает элемент сетки.
- gap — Промежутки между элементами во flexbox и grid.
В учебнике
- Subgrid — Значение subgrid — как вложенный блок использует линии родительской сетки, выравнивание заголовков, текста и кнопок в соседних карточках и поддержка браузерами.