Własność CSS grid-template-rows

Własność CSS grid-template-rows określa liczbę i rozmiary wierszy oraz nazwy linii tworzących te wiersze w układzie CSS Grid.

Wartości i składnia

Wartością własności grid-template-rows jest lista rozdzielanych spacjami wartości określających liczbę i szerokości wierszy siatki oraz nazwy linii, które wyznaczają ich granice. Jej najprostsza możliwa deklaracja może zawierać jedną liczbę z jednostką długości, która spowoduje utworzenie jednego wiersza o takiej wysokości, np.:

grid-template-rows: 100px;

Ta deklaracja tworzy jeden wiersz siatki o wysokości 100 pikseli. Jeśli dodana zostanie kolejna wartość, własność grid-template-rows utworzy dwa wiersze, każdy o określonej szerokości itd. Poniższa deklaracja tworzy trzy wiersze: pierwszy ma wysokość 100 pikseli, drugi — 200, a trzeci — 300:

grid-template-rows: 100px 200px 300px;

Wysokość wierszy można definiować na wiele sposobów.

Wartości rozmiaru

Własność grid-template-rows przyjmuje następujące wartości do określania wysokości wierszy:

Słowo kluczowe none

Oznacza, że ta własność nie tworzy żadnych wierszy jawnych.

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 pionowej — zobacz Oś blokowa i oś śródliniowa w układach CSS Grid). Jeśli rozmiar kontenera jest ustalany na podstawie rozmiaru ścieżek siatki, 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ą wiersze o wysokościach 1fr, 2fr i 3fr, to pierwszy będzie zajmował 1/6 tej przestrzeni, drugi 2/6, a trzeci 3/6 (Zobacz Jednostka fr w układach 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.

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.

Funkcja fit-content()

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

Funkcja repeat()

Powtarza podaną wartość określoną liczbę razy. Zobacz Funkcja CSS repeat().

Słowo kluczowe subgrid

Oznacza przyjęcie przez wiersz ustawień siatki nadrzędnej w obszarze, który ten wiersz obejmuje. Zobacz Siatki zagnieżdżone i podsiatki w układach CSS Grid.

Nazwy linii

Oprócz rozmiarów i liczby kolumn za pomocą własności grid-template-rows można także określić nazwy linii, które muszą być prawidłowym identyfikatorem CSS. Należy je wpisywać w nawiasie kwadratowym i oddzielać od innych wartości spacjami, np.:

grid-template-rows: [pierwsza-linia] 100px [druga-linia];

Ta deklaracja tworzy jeden wiersz o wysokości 100 pikseli. Linia początkowa tego wiersza nazywa się pierwsza-linia, a jego linia końcowa nazywa się druga-linia.

Każdej linii można nadać dowolną liczbę nazw, które należy wymienić w nawiasie kwadratowym rozdzielone spacjami, np.:

grid-template-rows: [pierwsza-linia linia-początkowa początek-wiersza] 100px [druga-linia];

Do linii początkowej wiersza utworzonego przez powyższą deklarację można odwoływać się za pomocą dowolnej z trzech nazw.

Podsumowanie