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


Властивість grid-template-rows визначає рядки сітки зі списком значень, розділених пробілами. Значення відображають розмір рядку.

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

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

grid-template-rows: 75px 1fr 50vw;

У цьому прикладі (результат вище) ми подаємо три значення для властивості grid-template-rows. Ці три значення вказують функцію визначення розміру доріжки, яка буде використовуватися для кожного з трьох рядків. Якщо ми збільшимо, скажімо, перше значення, перший рядок стане ширшим.

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

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

Наприклад:

grid-template-rows: [row1-start] 50vw [row2-start] 1fr [row3-start] 10vw;

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

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

Синтаксис

grid-template-rows: none | <track-list> | <auto-track-list>

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

<track-size>

може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою fr).

<line-name>

Назва іменованого рядка.

Значення без задання: none
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.gridTemplateRows

Переглядачі

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

57.0

Не підримується

52.0

10.1

44.0

16.0

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

57.0

52.0

10.3


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

Приклади


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

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

Синтаксис

.box {


  grid-template-rows: 25% 100px auto;


}

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