Свойство grid в CSS

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

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

еще см.:

CSS Урок:Грид-контейнер в CSS

Пример

Пример 1

Создать триколонную сетку, где высота первого ряда 150 пикселей:

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

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

Пример 2

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    '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:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

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

CSS синтаксис

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Значение свойства

Значение Описание
none Значение по умолчанию. Не определяет размер строк или столбцов.
grid-template-rows / grid-template-columns Определяет размер столбцов и строк.
grid-template-areas Определяет использование сеточной компоновки с именованными элементами.
grid-template-rows / grid-auto-columns Определяет размер строк (высоту) и автоматический размер столбцов.
grid-auto-rows / grid-template-columns Определяет автоматический размер строк и устанавливает свойство grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns Определяет размер строк (высоту), как размещать автоматически расположенные элементы и размер столбцов.
grid-auto-flow grid-auto-rows / grid-template-columns Определяет, как размещать автоматически расположенные элементы и размер строк, а также устанавливает свойство grid-template-columns.
initial Этот свойство устанавливается в значение по умолчанию. См.: initial.
inherit Этот свойство наследуется от родительского элемента. См.: inherit.

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

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

Поддержка браузерами

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

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

еще см.:

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

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

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

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

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

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

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

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