grid-template-areas

Базовая Широко распространенная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с октября 2017 года.

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

Попробуйте

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

Синтаксис

/* 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 ПУНКТ), например ., ..., или ..... и т. д. Токен пустой ячейки может использоваться для создания пустых мест в сетке.

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

Начальное значение	`none`
Применимо к	контейнерам сетки
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

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;
}

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

Результат

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

Спецификация
Модуль CSS Grid Layout уровня 2 # grid-template-areas-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`grid-template-areas`	57	16	52	44	10.1	57	52	43	10.3	6.0	57
`none`	57	79	52	44	10.1	57	52	43	10.3	7.0	57

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas