CSS свойство `grid-template-areas`

Определение и применение

CSS свойство grid-template-areas определяет шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area.

Схематичное отображение работы свойства grid-template-areas отображено на следующем изображении:

Нарисуйте прямоугольные области, задайте им имена и получите готовый grid-template-areas в редакторе областей Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.

Попробуйте значения grid-template-areas

Одинаковые имена объединяют соседние ячейки в прямоугольную область. Элемент A закреплён за a, B за b, C за c.

Значение свойстваgrid-template-areas: "a a" "b c";grid-template-areas: "a b" "a c";grid-template-areas: "b a" "c a";

grid-template-areas: "a a" "b c"

HTML и CSS примера

HTML

<div class="stage demo-target">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-areas: "a a" "b c";
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-areas: "a b" "a c";
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-areas: "b a" "c a";
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}

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

Спецификация: CSS grid

Поддерживается во всех основных браузерах с 2017 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.grid-template-areas
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`grid-template-areas`	✓57	✓16	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓6.0	✓57	✓10.3
`none`	✓57	✓79	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓7.0	✓57	✓10.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис:

CSS синтаксис:

CSS

grid-template-areas: none | <string>+;

/* Глобальные значения */
grid-template-areas: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; + — одно или несколько повторений.

JavaScript синтаксис:

JavaScript

element.style.gridTemplateAreas="footer footer footer";

Начальное значение свойства

none.

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

Значения grid-template-areas
Значение	Описание
`none`	Контейнер не определяет именованные области макета сетки. Начальное значение.
`.`	Точка означает пустую ячейку сетки макета.
`itemnames`	Строка создается для каждой отдельной строки в списке, а столбец - для каждой ячейки в строке. Несколько маркеров именованных ячеек внутри строк и между строками создают одну именованную область сетки, которая охватывает соответствующие ячейки сетки. Каждая строка с областями должна быть помещена в кавычки. Если заданные ячейки не образуют прямоугольник, то объявление является недопустимым.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `grid-template-areas` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Grid Layout — спецификация grid-template-areas.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Именованные области сетки

Измените строку "menu main" на "main menu": боковая область и содержимое поменяются местами.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html