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


Властивість grid-template є властивістю для скороченого запису властивостей визначення стовпців, рядків та областей сітки:

  • grid-template-rows,
  • grid-template-columns,
  • grid-template-areas.

Властивість `grid-template`

Це може бути зручним способом оголошення цих властивостей без необхідності друкувати кожну з них окремо.

Ось приклад того, як використовується grid-template:

grid-template: 20vh 1fr 20vh / 15vw 1fr 10vw;

/* ідентично до цих правил: */

grid-template-rows: 20vh 1fr 20vh;

grid-template-columns: 15vw 1fr 10vw;

grid-template-areas: none; /* значення без задання */

Властивість grid-template встановлює значення для рядків та стовпців (розділяючи їх косою рискою). У цьому прикладі перший рядок становить 20vh, другий - 1fr, а третій - 20vh. Перший стовпець становить 15vw, другий стовпець - 1fr, а третій - 10vw.

Одиниці vh та vw є одиницями довжини, які представляють 1% висоти вікна перегляду (для vh) або ширини (для vw). fr представляє частку вільного простору в контейнері сітки.

ASCII-синтаксис

Властивість grid-template дозволяє вам визначати області шаблонів за допомогою присвоєння певної назви. Це робить надзвичайно простою візуалізацію вашої сітці.

Як це працює: ви створюєте текстову сітку з використанням названих областей сітки. Назви сітчастих областей надаються у вигляді ряду рядків, кожен з яких представляє інший рядок. Наприклад:

grid-template:  "header header header" 60px

                "article nav ads" 1fr

                "footer footer footer" 60px

                / 1fr 20% 15%;

Наприклад:

Властивість `grid-template`

Іменовані рядки

Наприклад:

grid-template:   [header-start] "header header header" 60px [header-end]

  [middle-start] "article nav ads" 1fr [middle-end]

  [footer-start] "footer footer footer" 60px [footer-end]

  / 1fr 20% 15%;

Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.

Названі рядки можуть бути явними або неявними:

  • Явні іменовані рядки - це ті назви, які ви задаєте.
  • Неявні названі рядки - це імена, які автоматично створюються властивості grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ям foo (наприклад) створюються чотири неявно названих рядки. Дві імені, що називаються foo-start, є початковими рядками і стовпчиками в сітці та два імені foo-end - кінцевими.
Нотатка:

Зверніть увагу, що властивість grid-template не впливає на будь-які жолоби. Це дозволяє налаштовувати розмір жолобів для будь-якої батьківської сітки, що впливатиме і на її нащадків.

Якщо ви віддаєте перевагу скиданням розмірів жолобів, скористайтеся властивістю grid.

Синтаксис

grid-template: none |  subgrid | <grid-template-rows> / <grid-template-columns>;

Властивість grid-template може отримувати 3 значення:

none

встановлює всі три властивості до їх початкових значень (none)

subgrid

встановлює для grid-template-rows i grid-template-columns subgrid, й для grid-template-areas значення без задання

<grid-template-rows> / <grid-template-columns>

встановлює grid-template-columns і grid-template-rows вибрані значення відповідно й none для grid-template-areas

Значення без задання: none (для всіх трьох властивостей)
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.gridTemplate

Переглядачі

Переглядач
grid-template

57.0

11.0

54.0

10.1

44.0

16.0

Переглядач
grid-template

67.0

64.0

10.3


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Використання іменованих рядків

Приклад використання

Синтаксис

.box {


  grid-template: 100px 1fr / 50px 1fr;


}

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