grid-template-areas
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
(en-US), grid-column-start
(en-US), grid-column-end
(en-US), and their shorthands grid-row
(en-US), grid-column
(en-US), 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>
(en-US)+- Строка создаётся каждым переносом строки, тогда как каждая колонка создаётся в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создаёт одну названную 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
Смотрите также
- Связанные CSS свойства:
grid-template-rows
,grid-template-columns
,grid-template
(en-US) - Grid Layout Guide: Grid template areas
- Video tutorial: Grid Template Areas