Свойство CSS grid-template

Определение и использование

Свойство grid-template является сокращением следующих свойств:

См. также:

CSS учебник:Проекты сетки CSS

CSS справочник:Свойство grid-area

CSS справочник:Свойство grid-template-rows

CSS справочник:Свойство grid-template-columns

CSS справочник:Свойство grid-template-areas

Пример

Пример 1

Создание трехколонного макета высотой 150 пикселей для первой колонки:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Попробуйте сами

Пример 2

Определяет две строки, в которых "item1" охватывает первые два столбца первых двух строк (в пятистолбцовой сетке):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Попробуйте сами

Пример 3

Именуйте все элементы и создайте готовую веб-шаблон:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Попробуйте сами

CSS syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Значение атрибута
Значение Описание
none Значение по умолчанию. Не определяет размер столбцов или строк.
grid-template-rows / grid-template-columns Определяет размер столбцов и строк.
grid-template-areas Определяет использование сетки с именованными элементами.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Из наследуемого родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: none none none
Инheritance: нет
Анимация: Поддерживается. См. также:Анимационные свойства.
Версия: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplate = "250px / auto auto"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44