Атрибут CSS grid-template-areas

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

Свойство grid-template-areas определяет области в сеточной раскладке.

Вы можете использовать grid-area Назвать сетку свойств, а затем сослаться на это имя в свойстве grid-template-areas.

Каждая область определена кавычками. Используйте точку с запятой для ссылки на сетевые элементы без названия.

См. также:

Урок CSS:Проекты CSS-сеток

Руководство CSS:Свойство grid-area

Руководство CSS:Свойство grid-template

Пример

Пример 1

Чтобы نام پروژه "myArea" охватывал две колонки в пятиколонном макете:

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

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

Пример 2

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

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

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

CSS синтаксис

grid-template-areas: none|itemnames;

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

Значение Описание
none Значение по умолчанию. Неназванные области сетки (grid areas).
itemnames Определяет последовательность, как должны отображаться каждая строка и каждая колонка.

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

Значение по умолчанию: none
Инheritance: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: Модуль CSS Grid Layout Level 1
JavaScript синтаксис: object.style.gridTemplateAreas=". . . myArea myArea"

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

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

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