Атрибут grid-area в CSS

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

Атрибут grid-area определяет размер сетевых элементов и их положение в сеточной раскладке, и является сокращением для следующих свойств:

Атрибут grid-area также можно использовать для назначения имен сетевым элементам. Затем, через контейнер сетки, grid-template-areas Ссылка на атрибуты именованных сетевых элементов. См. примеры ниже.

См. также:

CSS Уроки:CSS Grid Layout

Пример

Пример 1

Установите "item1" с начала строки 2, столбца 1 и охватите два ряда и три столбца:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

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

Совет:Более подробные примеры можно найти в нижней части страницы.

Синтаксис CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Значение атрибута

Значение Описание
grid-row-start Определяет, с какого ряда начинать отображение элемента.
grid-column-start Определяет, с какого столбца начинать отображение элемента.
grid-row-end Определяет, на какой линии строки заканчивается отображение элемента, или на сколько строк он распространяется.
grid-column-end Указывает, на какой линии столбца заканчивается отображение элемента, или на сколько столбцов он распространяется.
itemname Определяет элемент сетки.

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

Default value: auto / auto / auto / auto
Инherit: Нет
Создание анимации: Поддержка. См. также:Свойства анимации.
Версия: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridArea="1 / 2 / span 2 / span 3"

Более примеров

Пример 2

Item1 назван 'myArea' и простирается на все пять столбцов в пятистолбечной сеточной разметке:

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

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

Пример 3

Сделайте 'myArea' простирающимся на два столбца в пятистолбечной сеточной разметке (точка означает проект без названия):

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

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

Пример 4

Сделайте 'item1' простирающимся на два столбца и две строки:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

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

Пример 5

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

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

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

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

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

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