Svojstvo grid-template-rows
Svojstvo grid-template-rows zadaje
broj i širinu redova koje
će element da zauzima u gridu ili mreži.
U vrednosti svojstva navodimo širinu redova
u bilo kojim jedinicama
za veličine.
Svojstvo se navodi u elementu-roditelju
i određuje širinu redova elementa-potomaka.
Prilikom navođenja u svojstvima vrednosti u pikselima
veličine redova će tačno odgovarati njima.
Ako zadamo reč auto, onda će redovi
popuniti sav dostupan prostor. Korišćenje
jedinice fr (frakcija) znači,
da će sav prostor biti podeljen
na jednake delove. Prednost
fr je njegova adaptivnost na
različite kontejnere ili rezolucije ekrana,
pošto fr jednostavno deli ih na navedeni
broj frakcija bez vezivanja za tačnu veličinu u pikselima.
Sintaksa
selektor {
grid-template-rows: širina reda;
}
Primer
Hajde da zadamo širinu redova za naše elemente u gridu:
<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;
}
:
Primer
Hajde da navedemo prvom i trećem redu fiksnu širinu u pikselima, a drugi red neka automatski popuni dostupan prostor:
<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;
}
:
Primer
A sada pomoću svojstva
grid-template-rows
učinimo da prvi i drugi
red zauzmu jedan deo kontejnera,
a treći red - tri dela:
<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;
}
:
Primer
Vrednosti, navedene u jedinicama fr
mogu da imaju razlomljeni oblik. Hajde da
izmenimo prethodni primer, navodeći
za drugi i treći red širinu
u razlomljenim brojevima:
<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;
}
:
Primer
Hajde u svojstvu grid-template-rows
da navedemo funkciju repeat(),
koja će da saopšti kontejneru, da sva
tri reda moraju da imaju istu širinu:
<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;
}
:
Primer
A sada hajde da izmenimo prethodni primer tako da se na tri ista reda doda četvrti, koji će da zauzme dve frakcije kontejnera:
<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;
}
:
Primer
Hajde da zadamo prvim dvema redovima širinu u jednu frakciju kontejnera, a poslednja dva reda - u dve frakcije:
<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;
}
:
Primer
A sada hajde da postavimo širinu redovima
kombinujući vrednosti, navedene pomoću
funkcije repeat() i slobodnih jedinica 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;
}
:
Primer
Takođe u funkciji repeat() možemo da navodimo
vrednost auto-fill, koja će da popuni
naš kontejner istim redovima potrebne širine:
<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;
}
:
Primer
Vrlo je zgodno zajedno sa auto-fill
navesti funkciju minmax,
koja zadaje opseg širine redova
od minimalne do maksimalne vrednosti.
Ako širina kontejnera ne prima sve
redove, onda će se neki od njih premestiti
na novi red, pri čemu će se redovi u redu
ravnomerno rasporediti u njemu. Hajde da izmenimo
prethodni primer, navodeći u njemu funkciju 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;
}
:
Primer
Sada hajde da navedemo svojstvo auto-fit,
čija se razlika od auto-fill sastoji u tome,
da ono prilagođava broj redova
dostupnoj širini kontejnera, šireći ili
skupljajući ih:
<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;
}
:
Primer
Takođe uz fr možemo
koristiti vrednosti u %, koje takođe određuju
koji deo kontejnera će red da zauzme.
Pri tome prvo će se izračunati veličina
reda u %, a preostali slobodni prostor
će biti podeljen na frakcije:
<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;
}
:
Primer
Hajde da iskoristimo zajedno svojstva
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;
}
:
Primer
Hajde pomoću svojstava
grid-template-columns i
grid-template-rows
da napravimo tabelu od devet ćelija, smeštenih
u tri reda. Pristom će drugi i treći red imati istu širinu,
a svaka kolona - različitu širinu:
<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;
}
:
Primer
A sada u tabeli iz prethodnog primera učinimo da gornji red bude širok dve frakcije, a prva kolona - u polovinu frakcije:
<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;
}
:
Vidite takođe
-
svojstvo
grid-template-columns,
koje zadaje broj i širinu kolona u gridu -
svojstvo
grid-auto-rows,
koje zadaje broj i širinu redova u implicitnom gridu
