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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
grid-auto-rows	57.0	52.0	10.1	44.0	16.0	10.0

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

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

Приклади

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

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 40px 80px;
    gap: 4px;
}

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