grid-template-areas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨октябрь 2017 г.⁩.

CSS-свойствоgrid-template-areas создаётгрид-области путём размещения именованных ячеек в грид-раскладке.

Интерактивный пример

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

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

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

<section>  <div>    <div>      <div>One (a)</div>      <div>Two (b)</div>      <div>Three (c)</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: repeat(3, minmax(40px, auto));  grid-gap: 10px;  width: 200px;}#example-element :nth-child(1) {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  grid-area: a;}#example-element :nth-child(2) {  background-color: rgba(255, 0, 200, 0.2);  border: 3px solid rebeccapurple;  grid-area: b;}#example-element :nth-child(3) {  background-color: rgba(94, 255, 0, 0.2);  border: 3px solid green;  grid-area: c;}

Создаваемые области не связаны с конкретным грид-элементом, но их можно указать в свойствахgrid-row-start,grid-row-end,grid-column-start,grid-column-end, или в их сокращённых вариантах:grid-row,grid-column иgrid-area.

Синтаксис

css

/* Ключевые слова */grid-template-areas: none;/* Строка (<string>) в качестве значения */grid-template-areas: "a b";grid-template-areas:  "a b b"  "a c d";/* Глобальные значения */grid-template-areas: inherit;grid-template-areas: initial;grid-template-areas: revert;grid-template-areas: unset;

Значения

none: Грид-контейнер не определяет именованных грид-областей.
<string>+: На каждую строку в значении создаётся ряд, а для каждой ячейки внутри строки — колонка. Несколько ячеек с одинаковыми именами внутри и между рядами образуют единую именованную грид-область, охватывающую соответствующие грид-ячейки. Однако это происходит только в том случае, если ячейки образуют прямоугольную форму.

Формальное определение

Начальное значение	`none`
Применяется к	сеточные контейнеры
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Формальный синтаксис

grid-template-areas =
none|
<string>+

Примеры

Создание именованных грид-областей

HTML

html

<section>  <header>Шапка</header>  <nav>Навигация</nav>  <main>Основной контент</main>  <footer>Подвал</footer></section>

CSS

css

#page {  display: grid;  width: 100%;  height: 250px;  grid-template-areas:    "head head"    "nav  main"    "nav  foot";  grid-template-rows: 50px 1fr 30px;  grid-template-columns: 150px 1fr;}#page > header {  grid-area: head;  background-color: #8ca0ff;}#page > nav {  grid-area: nav;  background-color: #ffa08c;}#page > main {  grid-area: main;  background-color: #ffff64;}#page > footer {  grid-area: foot;  background-color: #8cffa0;}