css властивість grid-template-areas
Властивість grid-template-areas вказує назви сіткових областей.
Визначає шаблон сітки, на який можна буде посилатися з grid-area. Наприклад:
grid-template-areas: "header header header"
"nav article ads"
"nav footer footer";
Порожні клітини
Ви можете вказати порожню клітинку, використовуючи символ (.), наприклад:
grid-template-areas: "a a"
". b";
Іменовані рядки
Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.
Названі рядки можуть бути явними або неявними:
- Явні іменовані рядки - це ті назви, які ви задаєте.
- Неявні названі рядки - це імена, які автоматично створюються властивості
grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ямfoo(наприклад) створюються чотири неявно названих рядки. Дві імені, що називаютьсяfoo-start, є початковими рядками і стовпчиками в сітці та два іменіfoo-end- кінцевими.
Синтаксис
grid-template-areas: none | <string>+Властивість grid-template-areas може отримувати 3 значення:
<grid-area-name>ім'я області визначеної у
grid-area.пуста комірка сітки
noneвідсутні сіткові області
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridTemplateAreas |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| grid-template-areas | 57.0 |
Не підтримується |
52.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| grid-template-areas | 57.0 |
52.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Приклад використання
Синтаксис
.box {
grid-template-areas:
"header header"
"article content";
}