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).

автор: Svitlana

правити

<line-name>

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
grid-template-rows	57.0	52.0	10.1	44.0	16.0	Не підримується

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div>25%</div>
    <div>100px</div>
    <div>auto</div>
</div>

.box {
    display: grid;
    grid-template-rows: 25% 100px auto;
    gap: 4px;
    height: 280px;
}

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}