Właściwość grid-template-rows
Właściwość grid-template-rows określa
liczbę i szerokość rzędów, które
element zajmie w gridzie lub siatce.
W wartości właściwości podajemy szerokość rzędów
w dowolnych jednostkach
wymiaru.
Właściwość jest określana w elemencie nadrzędnym
i definiuje szerokość rzędów elementów potomnych.
Przy określaniu wartości w pikselach we właściwościach
rozmiary rzędów będą dokładnie im odpowiadać.
Jeśli podamy słowo auto, to rzędy będą
wypełniać całą dostępną przestrzeń. Użycie
jednostki fr (frakcja) oznacza,
że cała przestrzeń zostanie podzielona
na równe części. Zaletą
fr jest jej adaptacyjność do
różnych kontenerów lub rozdzielczości ekranu,
ponieważ fr po prostu dzieli je na określoną
liczbę frakcji bez przywiązania do dokładnego rozmiaru w pikselach.
Składnia
selektor {
grid-template-rows: szerokość rzędu;
}
Przykład
Ustawmy szerokość rzędów dla naszych elementów w gridzie:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Ustawmy pierwszemu i trzeciemu rzędowi stałą szerokość w pikselach, a drugi rząd niech automatycznie wypełni dostępną przestrzeń:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz za pomocą właściwości
grid-template-rows
sprawmy, aby pierwszy i drugi
rząd zajęły jedną część kontenera,
a trzeci rząd - trzy części:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Wartości podane w jednostkach fr
mogą przyjmować postać ułamkową. Zmieńmy
poprzedni przykład, podając
dla drugiego i trzeciego rzędu szerokość
w liczbach ułamkowych:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Podajmy we właściwości grid-template-rows
funkcję repeat(),
która poinformuje kontener, że wszystkie
trzy rzędy powinny mieć tę samą szerokość:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz zmieńmy poprzedni przykład tak, aby do trzech identycznych rzędów dodać czwarty, który zajmie dwie frakcje kontenera:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Ustawmy pierwszym dwóm rzędom szerokość jednej frakcji kontenera, a ostatnim dwóm rzędom - dwie frakcje:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz ustawmy szerokość rzędów
łącząc wartości podane za pomocą
funkcji repeat() i swobodnych jednostek fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Również w funkcji repeat() można podawać
wartość auto-fill, która wypełni
nasz kontener identycznymi rzędami o żądanej przez nas szerokości:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Bardzo wygodnie jest razem z auto-fill
podać funkcję minmax,
która ustawia zakres szerokości rzędów
od wartości minimalnej do maksymalnej.
Jeśli szerokość kontenera nie pomieści wszystkich
rzędów, to niektóre z nich przeniosą się
do nowego wiersza, przy czym rzędy w wierszu
równomiernie rozłożą się w nim. Zmieńmy
poprzedni przykład, podając w nim funkcję minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Teraz podajmy właściwość auto-fit,
która różni się od auto-fill tym,
że dostosowuje liczbę rzędów do
dostępnej szerokości kontenera, rozszerzając lub
ściskając je:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Również obok fr można
używać wartości w %, które również określają
jaką część kontenera zajmie rząd.
Przy czym najpierw będzie obliczany rozmiar
rządu w %, a pozostała wolna przestrzeń
zostanie podzielona na frakcje:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Użyjmy razem właściwości
grid-template-columns i
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Za pomocą właściwości
grid-template-columns i
grid-template-rows
stwórzmy tabelę z dziewięcioma komórkami, rozmieszczonymi
w trzech rzędach. Przy czym drugi i trzeci rząd będą miały tę samą szerokość,
a każda kolumna - różną szerokość:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz w tabeli z poprzedniego przykładu zróbmy górny rząd o szerokości dwóch frakcji, a pierwszą kolumnę - o połowie frakcji:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Zobacz też
-
właściwość
grid-template-columns,
która określa liczbę i szerokość kolumn w gridzie -
właściwość
grid-auto-rows,
która określa liczbę i szerokość rzędów w niejawnym gridzie
