css властивість grid-template-areas


Властивість 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";


}

Додаткові посилання