CSS grid-template-areasСвойство
Пример
В следующем примере элементу item1 присваивается имя "myArea", и он охватывает пять столбцов:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Попробуйте сами »
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Определение и примечания по использованию свойства
Свойство grid-template-areas используется для задания макета сетки.
Свойство grid-area можно использовать для именования grid-элементов.
Именованные grid-элементы можно указать через свойство grid-template-areas контейнера.
Каждая строка заключена в одинарные кавычки' 'Определена, разделена пробелами.
.Число обозначает grid-элемент без имени.
| Значение по умолчанию: | auto |
|---|---|
| Наследуется: | нет |
| animation: | Поддерживается.Подробнее обanimatable Попробуйте сами |
| версия: | Модуль CSS Grid Layout Уровень 1 |
| Синтаксис JavaScript: | object.style.gridTemplateAreas=". . . myArea myArea" Попробуйте сами |
Синтаксис
grid-template-areas: none|itemnames;
| Значение | Описание |
|---|---|
| none | Значение по умолчанию, именованная сетка не указана. |
| itemnames | Определяет, как должен отображаться каждый столбец и каждая строка. |
Другие примеры
.Число указывает на элемент сетки без имени.Пример
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Попробуйте сами »
В следующем примере "item1" растягивается на 2 строки и 2 столбца:
Пример
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Попробуйте сами »
Назовите все элементы grid и создайте шаблон веб-страницы:
Пример
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
Попробуйте сами »
Связанные статьи
Учебник CSS:CSS Grid Layout
Справочник по CSS:grid-areaСвойство
Справочник по CSS:grid-templateСвойство
Другие расширения