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