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

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

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

Попробуйте

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 class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  grid-area: a;
}

#example-element :nth-child(2) {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
  grid-area: b;
}

#example-element :nth-child(3) {
  background-color: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-area: c;
}

Синтаксис

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b ."
  "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;

Значения

none

Контейнер сетки не задаёт именованных областей сетки.

<string>

Для каждой отдельной указанной строки создаётся ряд, а для каждой ячейки в строке — столбец. Несколько токенов ячеек с одинаковым именем в одной или нескольких строках создают единую именованную область сетки, охватывающую соответствующие ячейки сетки. Если эти ячейки не образуют прямоугольник, объявление считается недопустимым.

На все остальные области сетки без имени можно ссылаться с помощью токенов пустых ячеек. Токен пустой ячейки — это последовательность из одного или нескольких символов . (U+002E FULL STOP), например ., ... или ..... и т. д. Токен пустой ячейки можно использовать для создания пустых областей в сетке.

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

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

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

Примеры

Задание именованных областей сетки

HTML

<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    ".  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;
}

В приведённом выше коде для создания безымянной области в контейнере сетки использован пустой токен (.). С его помощью в левом нижнем углу сетки создана пустая область.

Результат

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

Совместимость с браузерами

См. также

• grid-template-rows
• grid-template-columns
• grid-template
• Области шаблона сетки
• Видео: Области шаблона сетки