Egenskaben grid-template-rows
Egenskaben grid-template-rows angiver
antallet og bredden af de rækker, som
elementet vil optage i et grid eller et net.
I egenskabens værdi angiver vi bredden af rækkerne
i enhver enhed
for størrelser.
Egenskaben angives i forældreelementet
og bestemmer bredden af rækkerne for barneelementerne.
Ved angivelse af værdier i pixels i egenskaberne
vil rækkestørrelserne nøjagtigt svare til dem.
Hvis vi angiver ordet auto, vil rækkerne
fylde al den tilgængelige plads. Brug af
enheden fr (fraktion) betyder,
at al pladsen vil blive opdelt
i lige store dele. Fordelen ved
fr er dens tilpasningsevne til
forskellige containere eller skærmopløsninger,
da fr simpelthen deler dem i det angivne
antal fraktioner uden binding til en nøjagtig størrelse i pixels.
Syntaks
selektor {
grid-template-rows: rækkebredde;
}
Eksempel
Lad os angive bredden af rækker for vores elementer i griddet:
<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;
}
:
Eksempel
Lad os give den første og tredje række en fast bredde i pixels, og lad den anden række automatisk fylde den tilgængelige plads:
<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;
}
:
Eksempel
Og nu med egenskaben
grid-template-rows
lad os gøre sådan, at den første og anden
række optager en del af containeren,
og den tredje række - tre 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;
}
:
Eksempel
Værdier angivet i enheder fr
kan tage brøkform. Lad os
ændre det forrige eksempel ved at angive
for den anden og tredje række bredden
i brøktal:
<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;
}
:
Eksempel
Lad os i egenskaben grid-template-rows
angive funktionen repeat(),
som fortæller containeren, at alle
tre rækker skal have samme bredde:
<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;
}
:
Eksempel
Og lad os nu ændre det forrige eksempel sådan, at der til de tre ens rækker tilføjes en fjerde, som vil optage to fraktioner af containeren:
<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;
}
:
Eksempel
Lad os give de første to rækker en bredde på en fraktion af containeren, og de sidste to rækker - to fraktioner:
<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;
}
:
Eksempel
Og lad os nu indstille bredden af rækkerne
vha. en kombination af værdier angivet med
funktionen repeat() og frie enheder 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;
}
:
Eksempel
Også i funktionen repeat() kan man angive
værdien auto-fill, som vil fylde
vores container med ens rækker med den ønskede bredde:
<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;
}
:
Eksempel
Det er meget praktisk sammen med auto-fill
at angive funktionen minmax,
som angiver intervallet for rækkebredder
fra minimum til maksimumværdi.
Hvis containerens bredde ikke kan rumme alle
rækker, vil nogle af dem blive flyttet
til en ny linje, hvor rækkerne i linjen
vil blive jævnt fordelt i den. Lad os ændre
det forrige eksempel ved at angive funktionen minmax i det:
<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;
}
:
Eksempel
Lad os nu angive egenskaben auto-fit,
hvis forskel fra auto-fill består i,
at den tilpasser antallet af rækker under
containerens tilgængelige bredde ved at udvide eller
skrumpe dem:
<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;
}
:
Eksempel
Også sammen med fr kan man
bruge værdier i %, som også bestemmer
hvilken del af containeren rækken vil optage.
Herved vil størrelsen af rækken først blive beregnet
i %, og den resterende ledige plads
vil blive opdelt i fraktioner:
<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;
}
:
Eksempel
Lad os bruge egenskaberne
grid-template-columns og
grid-template-rows sammen:
<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;
}
:
Eksempel
Lad os med egenskaberne
grid-template-columns og
grid-template-rows
oprette en tabel med ni celler, placeret
i tre rækker. Hvor den anden og tredje række vil have samme bredde,
og hver kolonne - forskellig bredde:
<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;
}
:
Eksempel
Og nu i tabellen fra det forrige eksempel lad os gøre den øverste række to fraktioner bred, og den første kolonne - en halv fraktion:
<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;
}
:
Se også
-
egenskaben
grid-template-columns,
som angiver antallet og bredden af kolonner i griddet -
egenskaben
grid-auto-rows,
som angiver antallet og bredden af rækker i det implicitte grid
