Atrybut CSS grid-template-rows

Definicja i użycie

grid-template-rows określa liczbę wierszy (i wysokość) w układzie siatki.

Wartości są listą oddzieloną spacjami, gdzie każda wartość określa wysokość odpowiedniego wiersza.

Zobacz również:

Kurs CSSCSS układ siatki

Podręcznik CSSAtrybut grid-columns

Podręcznik CSSAtrybut grid-template

Przykład

Określ rozmiar wiersza (wysokość):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Spróbuj sam

Gramatyka CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Wartość atrybutu

Wartość Opis
none Nie ustawiono rozmiaru. Twórz wiersze, gdy jest to konieczne.
auto Rozmiar wiersza zależy od rozmiaru kontenera oraz rozmiaru zawartości elementów w wierszu.
max-content Ustaw rozmiar każdej linii na podstawie największego elementu w wierszu.
min-content Ustaw rozmiar każdej linii na podstawie najmniejszego elementu w wierszu.
length Ustaw rozmiar wiersza, używając legalnych wartości długości. ZobaczJednostki długości.

Szczegółowe informacje techniczne

Domyślna wartość: none
Dziedziczenie: nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript: object.style.gridTemplateRows="50px 200px"

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44