CSS свойство grid-template-areas
определяет название grid-области.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Области не связаны с конкретным grid элементом, но можно ссылаться с grid-placement свойств grid-row-start
, grid-row-end
, grid-column-start
, grid-column-end
, and their shorthands grid-row
, grid-column
, and grid-area
.
Синтаксис
/* Keyword value */
grid-template-areas: none;
/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
"a c d";
/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;
Значения
none
- Контейнер не определяет никаких названий grid-области.
<string>
+- Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.
Формальный синтаксис
Пример
HTML
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
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;
}
Результат
Спецификации
Specification | Status | Comment |
---|---|---|
CSS Grid Layout Определение 'grid-template-areas' в этой спецификации. |
Кандидат в рекомендации | Initial definition |
Начальное значение | none |
---|---|
Применяется к | сеточные контейнеры |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Совместимость браузеров
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
- Связанные CSS свойства:
grid-template-rows
,grid-template-columns
,grid-template
- Grid Layout Guide: Grid template areas
- Video tutorial: Grid Template Areas