grid-template-areas
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
CSS-свойство grid-template-areas
создаёт грид-области путём размещения именованных ячеек в грид-раскладке.
Интерактивный пример
Создаваемые области не связаны с конкретным грид-элементом, но их можно указать в свойствах grid-row-start
, grid-row-end
, grid-column-start
, grid-column-end
, или в их сокращённых вариантах: grid-row
, grid-column
и grid-area
.
Синтаксис
/* Ключевые слова */
grid-template-areas: none;
/* Строка (<string>) в качестве значения */
grid-template-areas: "a b";
grid-template-areas:
"a b b"
"a c d";
/* Глобальные значения */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: unset;
Значения
none
-
Грид-контейнер не определяет именованных грид-областей.
<string>
+-
На каждую строку в значении создаётся ряд, а для каждой ячейки внутри строки — колонка. Несколько ячеек с одинаковыми именами внутри и между рядами образуют единую именованную грид-область, охватывающую соответствующие грид-ячейки. Однако это происходит только в том случае, если ячейки образуют прямоугольную форму.
Формальное определение
Начальное значение | none |
---|---|
Применяется к | сеточные контейнеры |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Формальный синтаксис
Примеры
Создание именованных грид-областей
HTML
<section id="page">
<header>Шапка</header>
<nav>Навигация</nav>
<main>Основной контент</main>
<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 |
---|
CSS Grid Layout Module Level 2 # grid-template-areas-property |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Связанные CSS-свойства:
grid-template-rows
,grid-template-columns
,grid-template
- Руководство по грид-раскладке: Области грид-шаблона
- Видеоурок: Grid Template Areas