Egenskapen grid-template-rows
Egenskapen grid-template-rows angir
antall og bredde på radene som
elementet vil oppta i et grid eller et nett.
I verdien til egenskapen angir vi bredden på radene
i alle enheter
for størrelser.
Egenskapen angis i foreldreelementet
og bestemmer bredden på radene til barneelementene.
Ved å angi verdier i piksler i egenskapene
vil radstørrelsene tilsvare dem nøyaktig.
Hvis vi setter ordet auto, vil radene
fylle alt tilgjengelig plass. Bruk av
enheten fr (fraksjon) betyr
at all plassen vil bli delt
i like andeler. Fordelen med
fr er dens tilpasningsevne til
forskjellige beholdere eller skjermoppløsninger,
siden fr bare deler dem i det angitte
antall fraksjoner uten tilknytning til nøyaktig størrelse i piksler.
Syntaks
velger {
grid-template-rows: radbredde;
}
Eksempel
La oss sette bredden på radene for våre 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
La oss sette en fast bredde i piksler for første og tredje rad, og la den andre raden automatisk fylle tilgjengelig plass:
<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
La oss nå ved hjelp av egenskapen
grid-template-rows
gjøre slik at første og andre
rad tar én del av beholderen,
og tredje rad tar tre deler:
<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
Verdier angitt i fr-enheter
kan ha brøkform. La oss
endre forrige eksempel ved å angi
for andre og tredje rad en bredde
i desimaltall:
<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
La oss i egenskapen grid-template-rows
angi funksjonen repeat(),
som forteller beholderen at alle
tre radene skal ha 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
La oss nå endre forrige eksempel så det til de tre like radene legges til en fjerde, som tar to fraksjoner av beholderen:
<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
La oss sette de to første radene til en fraksjon av beholderen, og de to siste radene til to fraksjoner:
<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
La oss nå sette radbreddene ved å
kombinere verdier angitt med
funksjonen repeat() og frie fr-enheter:
<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
I funksjonen repeat() kan man også angi
verdien auto-fill, som vil fylle
vår beholder med like rader med ønsket 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 veldig praktisk å sammen med auto-fill
angi funksjonen minmax,
som setter et område for radbredder
fra minimums- til maksimumsverdi.
Hvis beholderen ikke har plass til alle
radene, vil noen av dem flyttes
til en ny linje, mens radene i linjen
fordeles jevnt i den. La oss endre
forrige eksempel ved å angi funksjonen minmax i den:
<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
La oss nå angi egenskapen auto-fit,
hvis forskjell fra auto-fill er at
den tilpasser antall rader under
tilgjengelig bredde i beholderen, ved å utvide eller
krympe 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
Sammen med fr kan man også
bruke verdier i %, som også bestemmer
hvilken del av beholderen raden skal oppta.
Først vil størrelsen på raden beregnes
i %, og den gjenværende ledige plassen
vil bli delt i fraksjoner:
<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
La oss bruke egenskapene
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
La oss ved hjelp av egenskapene
grid-template-columns og
grid-template-rows
lage en tabell med ni celler, plassert
i tre rader. Dessuten skal andre og tredje rad ha samme bredde,
og hver kolonne skal ha forskjellig 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
La oss nå i tabellen fra forrige eksempel gjøre den øverste raden to fraksjoner bred, og den første kolonnen en halv fraksjon:
<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å
-
egenskapen
grid-template-columns,
som angir antall og bredde på kolonner i et grid -
egenskapen
grid-auto-rows,
som angir antall og bredde på rader i et implisitt grid
