grid-area
Помещает элемент сетки в именованную область или между заданными линиями.
Синтаксис
grid-area: name;Значения
| Параметр | Тип | Описание |
|---|---|---|
| name | ident | Имя области из `grid-template-areas`. |
| row / column / row-end / column-end | lines | Номера линий: `1 / 1 / 3 / 3`. |
Примеры
Элементы размещены по именам областей независимо от порядка в разметке:
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b"; gap: 6px; }
.grid div { padding: 8px; background: peachpuff; }
</style>
<div class="grid">
<div style="grid-area: b;">Placed in b</div>
<div style="grid-area: a;">Placed in a — two columns</div>
</div>Примечания
Имя области в grid-area пишут без кавычек, а в grid-template-areas — в кавычках.
См. также
- grid-template-areas — Рисует раскладку сетки картой именованных областей.
- grid-column — Какие колонки занимает элемент сетки.
- grid-row — Какие ряды занимает элемент сетки.
Вопросы и ответы по теме
В учебнике
- Линии и области сетки — Как поставить элемент в нужное место сетки — номера линий, grid-column и grid-row, span, именованные области grid-template-areas.