Lastnost grid-template-rows
Lastnost grid-template-rows določa
število in višino vrstic, ki
jih bo element zasedel v mreži.
V vrednosti lastnosti podamo višino vrstic
v poljubnih enotah
za velikosti.
Lastnost se navede v starševskem elementu
in določa višino vrstic podrejenih elementov.
Pri podajanju vrednosti v lastnostih v slikovnih pikah
bo velikost vrstic natančno ustrezala tem vrednostim.
Če podamo besedo auto, bodo vrstice
zapolnile ves razpoložljiv prostor. Uporaba
enote fr (frakcija) pomeni,
da bo ves prostor razdeljen
na enake dele. Prednost
fr je njena prilagodljivost
različnim vsebnikom ali ločljivostim zaslona,
saj fr preprosto razdeli prostor na navedeno
število frakcij brez povezave z natančno velikostjo v slikovnih pikah.
Sintaksa
selektor {
grid-template-rows: višina vrstice;
}
Primer
Nastavimo višino vrstic za naše elemente v mreži:
<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
Nastavimo prvi in tretji vrstici fiksno višino v slikovnih pikah, druga vrstica pa naj avtomatično zapolni razpoložljivi 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
Zdaj pa z lastnostjo
grid-template-rows
naredimo tako, da bosta prva in druga
vrstica zasedli en del vsebnika,
tretja vrstica pa tri dele:
<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, podane v enotah fr
lahko zavzamejo tudi ulomke. Spremenimo
prejšnji primer tako, da
za drugi in tretji vrstici podamo višino
v ulomkih:
<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
V lastnosti grid-template-rows
uporabimo funkcijo repeat(),
ki bo vsebniku sporočila, da morajo vse
tri vrstice imeti enako višino:
<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
Zdaj pa spremenimo prejšnji primer tako, da se trem enakim vrsticam doda četrta, ki bo zasedla dve frakciji vsebnika:
<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
Nastavimo prvima dvema vrsticama višino ene frakcije vsebnika, zadnjima dvema vrsticama pa - dve frakciji:
<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
Zdaj pa nastavimo višino vrstic
s kombiniranjem vrednosti, podanih s funkcijo
repeat() in prostih enot 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
Prav tako je v funkciji repeat() mogoče podati
vrednost auto-fill, ki bo zapolnila
naš vsebnik z enakimi vrsticami želene višine:
<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
Zelo priročno je skupaj z auto-fill
uporabiti funkcijo minmax,
ki nastavi obseg višine vrstic
od najmanjše do največje vrednosti.
Če višina vsebnika ne sprejme vseh
vrstic, se bodo nekatere od njih premaknile
v novo vrstico, pri čemer se bodo vrstice v vrstici
enakomerno porazdelile. Spremenimo
prejšnji primer tako, da v njem uporabimo funkcijo 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
Zdaj pa uporabimo lastnost auto-fit,
katere razlika od auto-fill je v tem,
da prilagodi število vrstic
razpoložljivi višini vsebnika, jih razširi ali
skrči:
<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
Poleg fr je mogoče
uporabiti tudi vrednosti v %, ki prav tako določajo
kateri del vsebnika bo zasedla vrstica.
Pri tem se bo najprej izračunala velikost
vrstice v %, preostali prosti prostor
pa se bo razdelil 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
Uporabimo skupaj lastnosti
grid-template-columns in
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
Z lastnostmi
grid-template-columns in
grid-template-rows
ustvarimo tabelo iz devetih celic, razporejenih
v treh vrsticah. Pri tem bosta drugi in tretji vrstici imeli enako višino,
vsak stolpec pa - različno širino:
<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
Zdaj pa v tabeli iz prejšnjega primera naredimo zgornjo vrstico višine dveh frakcij, prvi stolpec pa - pol 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;
}
:
Glejte tudi
-
lastnost
grid-template-columns,
ki določa število in širino stolpcev v mreži -
lastnost
grid-auto-rows,
ki določa število in višino vrstic v implicitni mreži
