Własność CSS grid-auto-rows

Własność CSS grid-auto-rows definiuje rozmiary wierszy siatki niejawnej w układach CSS Grid.

Siatka taka może powstać na przykład w wyniku umieszczenia jednostki siatki w kolumnie lub wierszu poza siatką jawną.

Wartości i składnia

Wartością własności grid-auto-rows jest lista rozdzielanych spacjami wartości określających wysokości wierszy siatki niejawnej układu CSS Grid. Jeśli zostanie podana tylko jedna wartość, to odnosi się ona do wszystkich wierszy niejawnych siatki. Jeśli zostanie ich podanych więcej, to będą cyklicznie stosowane jedna po drugiej do kolejnych wierszy niejawnych.

Własność grid-auto-rows przyjmuje następujące wartości:

Liczba z jednostką długości CSS

Dowolna nieujemna liczba z jednostką długości CSS.

Wartość procentowa

Nieujemna wartość procentowa, odnosi się do wewnętrznego rozmiaru kontenera siatki, a konkretnie do długości jego osi śródliniowej (w uproszczeniu poziomej — zobacz Oś blokowa i oś śródliniowa w CSS Grid). Jeśli rozmiar kontenera jest ustalany na podstawie szerokości kolumn, to wartość procentowa jest traktowana jako auto.

Liczba z jednostką fr

Jednostka fr (ang. flex factor) to tzw. współczynnik elastyczności, który określa, jaka część dostępnej przestrzeni wolnej przypada dla każdego wiersza. Jeśli na przykład zdefiniowane są kolumny o szerokościach 1fr, 2fr i 3fr, to pierwsza będzie zajmowała 1/6 tej przestrzeni, druga 2/6, a trzecia 3/6 (Zobacz Jednostka fr w CSS Grid).

Słowo kluczowe max-content

Oznacza rozmiar treści w wymiarze blokowym.

Słowo kluczowe min-content

W przypadku wierszy to słowo kluczowe znaczy to samo, co max-content.

Funkcja minmax()

Definiuje minimalną i maksymalną wysokość wiersza. Zobacz Funkcja CSS minmax().

Słowo kluczowe auto

Jeśli zostanie użyte samodzielnie, powoduje, że wiersz zajmuje całą przestrzeń, jaka jest dostępna w kontenerze po ustaleniu rozmiarów pozostałych wierszy. Jeśli dwa wiersze mają wartość auto, to dostępna przestrzeń jest dzielona między nie po równo itd.

Jeśli słowo to zostanie użyte w funkcji minmax(), to na pozycji wartości minimalnej w większości przypadków oznacza min-content.

Na pozycji wartości maksymalnej oznacza max-content, ale dodatkowo reaguje na ustawienia własności align-content i justify-content.

Funkcja fit-content()

Wykorzystuje dostępną wolną przestrzeń, ale działa w granicach między min-content a max-content.

Podsumowanie