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

Свойство grid-template-areas используется для определения именованных областей сетки путем присвоения имен ячейкам сетки. Вы можете именовать элементы сетки с помощью свойства grid-area. Каждая область определяется двойными кавычками. К этим областям можно обращаться из таких свойств размещения сетки, как grid-row-start, grid-row-end, grid-column-end, grid-column-start, а также из их сокращенных аналогов, таких как grid-row, grid-area и grid-column.

Начальное значение	none
Применяется к	Контейнерам сетки.
Наследуется	Нет.
Анимация	Да. Свойство анимируется.
Версия	CSS Grid Layout Module Level 1
Синтаксис DOM	object.style.gridTemplateAreas = '"item1 item1 . ." "item1 item1 . ."';

Синтаксис

Синтаксис CSS grid-template-areas

css

grid-template-areas: none | itemnames | initial | inherit;

Пример свойства grid-template-areas:

Пример кода CSS grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: menu;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "header header header header header header" "menu main main main right right" "menu footer footer footer footer footer";
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Menu</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS grid-template-areas another

Пример свойства grid-template-areas, где элементу сетки присвоено имя "item1":

Еще один пример кода CSS grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "item1 item1 . . .";
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
none	Именованные области сетки не будут определены. Это значение по умолчанию для данного свойства.	Запустить »
itemnames	Последовательность заключенных в кавычки строк, определяющих области сетки.	Запустить »

Практика

Для чего в CSS используется свойство 'grid-template-areas'?

Оно используется для задания макета элементов в сетке.Оно используется для создания фонового изображения веб-страницы.Оно используется для определения шаблона именованных областей сетки, на которые ссылается свойство 'grid-area' элемента сетки.Оно используется для изменения цвета текста на веб-странице.

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

Синтаксис ​

Пример свойства grid-template-areas: ​

Результат ​

Пример свойства grid-template-areas, где элементу сетки присвоено имя "item1": ​

Значения ​