Свойство CSS grid-template-areas
Узнайте, как использовать CSS grid-template-areas для именования областей сетки, построения макетов и их перестройки с помощью медиазапросов.
Свойство grid-template-areas позволяет визуально задавать макет CSS grid, рисуя его с помощью имён вместо чисел. Оно применяется к контейнеру сетки, которому передаётся одна строка в кавычках на каждую строку сетки. Внутри каждой строки указывается имя для каждой ячейки колонки, а ячейки с одинаковым именем объединяются в одну прямоугольную именованную область.
Затем каждый элемент сетки размещается путём ссылки на одно из этих имён через свойство grid-area — например, grid-area: header; помещает этот элемент туда, где в шаблоне было указано header. Поскольку строки выстраиваются одна под другой, напоминая ASCII-рисунок, исходный код оказывается похожим на создаваемую страницу, что делает сложные макеты гораздо более читаемыми и удобными для перестройки, чем ручное задание grid-row-start, grid-column-start и их сокращённых вариантов.
Справочник свойства
| Начальное значение | none |
| Применяется к | Контейнерам сетки |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS Grid Layout Module Level 1 |
Синтаксис
grid-template-areas: none | <string>+;none — значение по умолчанию, означающее, что именованные области не определены. В противном случае значением являются одна или несколько строк в кавычках — по одной на каждую строку сетки.
Как читать строки
Несколько правил помогают разобраться в синтаксе:
- Одна строка = одна строка сетки. Три строки в кавычках создают три строки сетки; количество токенов-имён в каждой строке определяет количество колонок.
- Каждая строка должна содержать одинаковое количество токенов, иначе браузер считает всё объявление недействительным и игнорирует его.
- Повторяющееся имя охватывает несколько ячеек. Одно и то же имя в двух или более соседних ячейках — по горизонтали, вертикали или прямоугольнику — объединяет их в одну область. Форма должна быть прямоугольной; L-образная форма недопустима.
- Точка (
.) обозначает пустую ячейку, не принадлежащую ни одной именованной области. Несколько последовательных точек (например,...) считаются одной пустой ячейкой и широко используются для улучшения читаемости. - Именование области не задаёт размеры её треков. Используйте grid-template-columns и grid-template-rows — или сокращённое свойство grid-template — для управления размерами.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Здесь header и footer охватывают все три колонки, тогда как menu, main и right располагаются рядом в средней строке.
Значения
| Значение | Описание |
|---|---|
none | Именованные области сетки не определены. Элементы сетки размещаются другими способами (номера линий, span или автоматическое размещение). |
<string>+ | Одна или несколько строк в кавычках, описывающих шаблон. Каждая строка представляет строку сетки; каждый токен, разделённый пробелом внутри строки, представляет ячейку. Повторяющиеся токены образуют прямоугольные именованные области; токен . — неименованная (пустая) ячейка. |
Пример базового макета
Классический макет страницы — шапка, боковая панель, контент и подвал — наглядно демонстрирует, зачем нужны именованные области.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Результат
Пустые ячейки с точками
Токен-точка помещает элемент вне именованной области, оставляя ячейку незанятой. В примере ниже item1 охватывает первые два столбца пятиколоночной сетки; оставшиеся три ячейки в этой одной строке пусты.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Адаптивные макеты с медиазапросами
grid-template-areas хорошо сочетается с медиазапросами: достаточно переписать строки внутри блока точки останова, и макет перестроится без изменения разметки и без необходимости перенумеровывать линии сетки.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Каждый элемент сетки сохраняет своё имя grid-area; меняется только шаблон. Именно поэтому именованные области предпочтительнее числовой расстановки линий в адаптивных дизайнах.
Типичные ошибки
Области должны быть прямоугольными
Если одно и то же имя встречается в L-образной, диагональной или любой непрямоугольной форме ячеек, браузер считает всё объявление grid-template-areas недействительным и откатывается к none. Каждая именованная область должна образовывать сплошной прямоугольник.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Все строки должны иметь одинаковое количество колонок
Каждая строка в кавычках должна содержать одинаковое количество токенов, разделённых пробелами. Дополняйте короткие строки токенами-точками, чтобы колонки выравнивались:
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Именование области не задаёт размеры треков
Именованные области сообщают браузеру какие ячейки принадлежат вместе, но не насколько большими они должны быть. Всегда используйте grid-template-areas в паре с grid-template-columns и grid-template-rows:
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Несовпадающие элементы сетки размещаются автоматически
Если имя grid-area дочернего элемента не совпадает ни с одной областью в шаблоне, браузер размещает его автоматически с помощью алгоритма grid-auto-flow — элемент попадает в следующую доступную неявную ячейку, а не исчезает.
Сокращённое свойство grid-template
Свойство grid-template объединяет grid-template-rows, grid-template-columns и grid-template-areas в одном объявлении:
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}Размер строки следует за каждой строкой-шаблоном; размеры колонок указываются после финального /. Результат идентичен написанию трёх свойств по отдельности.