grid-template-areas
Рисует раскладку сетки картой именованных областей.
Синтаксис
grid-template-areas: "a a" "b c";Значения
| Параметр | Тип | Описание |
|---|---|---|
| "names" | string | Одна строка на ряд, одно имя на колонку; повтор имени растягивает область. |
| . | empty cell | Пустая ячейка. |
Примеры
Страница с шапкой, меню и содержимым:
<style>
.page {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas:
"head head"
"side main";
gap: 6px;
}
.page > * { padding: 8px; background: lightskyblue; }
</style>
<div class="page">
<div style="grid-area: head;">Header</div>
<div style="grid-area: side;">Menu</div>
<div style="grid-area: main;">Content</div>
</div>Примечания
Области должны быть прямоугольниками. Красота подхода — в медиазапросах: чтобы поменять раскладку для телефона, достаточно переопределить только grid-template-areas.
См. также
- grid-area — Помещает элемент сетки в именованную область или между заданными линиями.
- grid-template-columns — Количество и ширина колонок сетки.
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
Вопросы и ответы по теме
В учебнике
- Линии и области сетки — Как поставить элемент в нужное место сетки — номера линий, grid-column и grid-row, span, именованные области grid-template-areas.