css властивість grid-auto-rows
Властивість grid-auto-rows визначає розмір неявно створених рядків сітки.
У прикладі вище, за допомогою цієї властивості ми визначили висоту для рядків, які не були явним чином виражені через властивість grid-template-rows (ми визначили явно висоту тільки для першого рядку).
Визначає розмір будь-яких автоматично сформованих сіткових доріжок (наприклад, неявних сіткових доріжок). Неявні сіткові доріжки створюються, коли ви явно позиціонуєте рядки або стовпці (за допомогою grid-template-rows або grid-template-columns), що знаходяться поза межами визначеної сітки.
Якщо елемент сітки розміщений у рядку, який за розміром більший за інші рядки сітки - створюються неявні клітинки сітки для його розміщення. Це може статися або шляхом явного позиціонування в рядку, що знаходиться поза межами сітки, або за допомогою алгоритму автоматичного розміщення, створюючи додаткові рядки. Щоб зрозуміти, як створюються сіткові доріжки, подивіться на цей приклад:
.box {
display: grid;
grid-auto-rows: 275px;
}
Властивість також може приймати декілька значень. Наприклад:
.box {
display: grid;
grid-auto-rows: 30px 40px 60px;
}
Синтаксис
grid-auto-rows: <track-size> ...;Властивість grid-auto-rows може отримувати одне значення:
track-sizeМоже бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою спеціальної одиниці вимірювання
fr).Також, доступні для використання такі ключові слова, як
max-content(найбільший можливий розмір),min-content(найменший),minmax(min, max)(визначає діапазон розмірів, що перевищує або дорівнюєminі менше або дорівнюєmax).Також існує функція
fit-content(min, max), яка означаєmin(max-content, max(auto, argument)).
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridAutoRows |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| grid-auto-rows | 57.0 |
10.0 |
52.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| grid-auto-rows | 57.0 |
52.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Результат роботи
Декілька значень
Синтаксис
.box {
grid-auto-rows: 1fr 2fr;
}