CSS-свойство grid-template
Узнайте, как использовать сокращённое свойство CSS grid-template для определения строк, столбцов и именованных областей в одном объявлении.
CSS-свойство grid-template определяет строки, столбцы и именованные области CSS Grid в одном объявлении. Оно является сокращением для трёх развёрнутых свойств:
grid-template-rows— высота каждой строки трека.grid-template-columns— ширина каждого столбца трека.grid-template-areas— именованные области, в которые можно размещать элементы с помощьюgrid-area.
На этой странице объясняется синтаксис, как косая черта разделяет строки и столбцы, как работает форма с именованными областями, когда использовать grid-template вместо более широкого сокращения grid, а также приведены рабочие примеры, которые можно редактировать в реальном времени.
Как работает сокращение
grid-template применяется только к контейнеру сетки — элементу с display: grid (или inline-grid). Свойство имеет две основные формы.
Форма строки / столбцы
Укажите сначала размеры строк, затем косую черту (/), затем размеры столбцов:
.container {
display: grid;
grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}Символ / обязателен при указании и строк, и столбцов — он сообщает браузеру, где начинается список столбцов. В качестве размеров можно использовать любые единицы трека:
| Единица | Значение |
|---|---|
px, %, em | Фиксированные или относительные размеры |
fr | Доля оставшегося свободного пространства |
auto | Размер по содержимому, затем распределяет оставшееся пространство |
min-content | Минимальный размер, при котором не возникает переполнения |
max-content | Максимальный размер без переноса строки |
minmax(min, max) | Диапазон — например, minmax(100px, 1fr) |
repeat(n, size) | Повторить трек n раз — например, repeat(3, 1fr) |
Единица fr уникальна для раскладки сетки. 1fr 2fr означает «одна часть и две части свободного пространства» — то есть второй трек в два раза шире первого.
Форма с именованными областями
Каждая строка в кавычках представляет одну строку сетки. Слова внутри строки задают имена ячеек в этой строке. Ячейки с одинаковым именем в разных строках объединяются в одну прямоугольную область. Точка (.) оставляет ячейку безымянной:
.container {
display: grid;
grid-template:
"header header" 60px
"nav main" 1fr
/ 120px 1fr;
}Размер строки (например, 60px, 1fr) указывается после строки в кавычках, перед следующей строкой. Необязательные размеры столбцов идут после финального /.
Затем элементы размещаются в именованных областях с помощью grid-area:
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }Это наиболее читаемый способ описания классической разметки страницы в CSS.
grid-template не устанавливает отступ между треками. Используйте gap (или развёрнутое column-gap) для задания промежутков между треками. Отступы не связаны с размерами треков.
grid-template и grid
Более широкое сокращение grid также сбрасывает свойства неявной сетки — grid-auto-rows, grid-auto-columns и grid-auto-flow — до их начальных значений. grid-template не затрагивает эти свойства.
Когда что использовать:
- Используйте
grid-template, если хотите только определить явные треки и области, не влияя на поведение автоматического размещения. - Используйте
grid, если хотите сбросить все свойства сетки одним объявлением.
Справочник по свойству
| Характеристика | Значение |
|---|---|
| Начальное значение | none |
| Применяется к | Контейнерам сетки |
| Наследуется | Нет |
| Анимируемо | Да — размеры треков анимируются |
| Спецификация | CSS Grid Layout Module Level 1 |
Синтаксис
grid-template: none
| <grid-template-rows> / <grid-template-columns>
| [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
| initial | inherit | unset;Значения
| Значение | Описание |
|---|---|
none | Сбрасывает все три развёрнутых свойства (grid-template-rows, grid-template-columns, grid-template-areas) до начальных значений. Элементы размещаются алгоритмом автоматического размещения. |
<rows> / <columns> | Задаёт явные треки строк и столбцов. Допустима любая единица размера: px, %, fr, auto, minmax(), repeat() и т. д. |
"area-names" <size> | Задаёт именованные области строка за строкой. Каждая строка в кавычках — одна строка сетки; необязательный размер после неё — высота этой строки. |
initial | Сбрасывает свойство до none. |
inherit | Наследует вычисленное значение от родительского элемента. |
unset | Ведёт себя как inherit, если свойство наследуется, иначе — как initial. |
Примеры
Определение строк и столбцов
Эта сетка имеет одну явную строку высотой 170px и три столбца с размером auto. Элементы, выходящие за пределы первой строки, размещаются в неявно созданных строках.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template: 170px / auto auto auto;
grid-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 property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Результат:
Использование именованных областей
Здесь первый элемент получает имя item1 через grid-area. Две строки в кавычках размещают item1 в блоке 2×2 в верхнем левом углу. Точки (.) обозначают пустые ячейки, в которые попадают остальные элементы.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
grid-area: item1;
}
.grid-container {
display: grid;
grid-template: 'item1 item1 . .' 'item1 item1 . .';
grid-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 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:
<!DOCTYPE html>
<html>
<head>
<title>Named area layout</title>
<style>
.page {
display: grid;
grid-template:
"header header" 60px
"sidebar content" 1fr
"footer footer" 40px
/ 160px 1fr;
gap: 8px;
height: 300px;
}
.page > * {
background: #dde;
padding: 8px;
font-family: sans-serif;
}
.hdr { grid-area: header; }
.side { grid-area: sidebar; }
.main { grid-area: content; }
.ftr { grid-area: footer; }
</style>
</head>
<body>
<div class="page">
<div class="hdr">Header</div>
<div class="side">Sidebar</div>
<div class="main">Content</div>
<div class="ftr">Footer</div>
</div>
</body>
</html>Разметка полностью определена в одном свойстве: три строки (60 пкс / гибкая / 40 пкс) и два столбца (боковая панель 160 пкс / гибкий контент). Span-атрибуты grid-column или grid-row не нужны — имена всё делают сами.
Распространённые ошибки
Области должны образовывать прямоугольник. Нельзя создать L-образную или T-образную именованную область. Если попытаться, объявление будет недействительным и браузер его проигнорирует.
Количество ячеек в строках должно совпадать. Число ячеек в каждой строке в кавычках должно быть одинаковым. "a b" в паре с "a b c" — недопустимо.
grid-template сбрасывает три развёрнутых свойства. Установка grid-template: 1fr / 1fr неявно задаёт grid-template-areas: none — все ранее установленные именованные области удаляются.
Неявные треки не затрагиваются. grid-template управляет только явной сеткой. Лишние элементы, выходящие за пределы заданных строк и столбцов, размещаются в неявных треках, размер которых определяется свойствами grid-auto-rows и grid-auto-columns.
Поддержка браузерами
grid-template является частью CSS Grid Layout Module Level 1 и поддерживается всеми современными браузерами (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). Свойство не оказывает эффекта на элементы, которые не являются контейнерами сетки — всегда используйте его вместе с display: grid.