Egenskaben grid-template-columns
Egenskaben grid-template-columns angiver
antallet og bredden af de kolonner, som
elementet vil optage i et grid eller et net.
Egenskaben angives i forældreelementet
og bestemmer bredden af kolonnerne for borneelementerne.
I egenskabens værdi angiver vi bredden af kolonnerne
i enhver enhed
for størrelser.
Ved angivelse af værdier i pixel i egenskaberne
vil kolonnernes størrelser svare nøjagtigt til dem.
Hvis vi angiver ordet auto, vil kolonnerne
fylde al den tilgængelige plads. Brug af
enheden fr (fraktion) betyder,
at al pladsen bliver opdelt
i lige store dele. Fordelen ved
fr er dens tilpasning til
forskellige beholdere eller skærmopløsninger,
da fr simpelthen deler dem i det angivne
antal fraktioner uden binding til en nøjagtig størrelse i pixel.
Syntaks
selektor {
grid-template-columns: kolonnebredde;
}
Eksempel
Lad os angive bredden af kolonnerne 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-columns: 50px 100px 200px 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 kolonne en fast bredde i pixel, og lad den anden kolonne automatisk fylde den tilgængelige plads:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Lad os nu ved hjælp af egenskaben
grid-template-columns
gøre sådan, at den første og anden
kolonne optager en del af beholderen,
og den tredje kolonne - tre dele:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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 kolonne bredden
i brøktal:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Lad os i egenskaben grid-template-columns
angive funktionen repeat(),
som fortæller beholderen, at alle
tre kolonner skal have samme bredde:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Lad os nu ændre det forrige eksempel sådan, at der til de tre ens kolonner tilføjes en fjerde, som vil optage to fraktioner af beholderen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Lad os give de første to kolonner en bredde på en fraktion af beholderen, og de sidste to kolonner - på to fraktioner:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Lad os nu indstille bredden af kolonnerne
ved at kombinere værdier angivet med hjælp af
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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
Også i funktionen repeat() kan man angive
værdien auto-fill, som vil fylde
vores beholder med ens kolonner 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-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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 kolonnebredder
fra minimum til maksimumværdi.
Hvis bredden af beholderen ikke kan rumme alle
kolonner, vil nogle af dem blive flyttet
til en ny række, hvor kolonnerne i rækken
vil blive jævnt fordelt i den. Lad os ændre
det forrige eksempel ved at angive funktionen minmax i det.
For at se de forskellige placeringsmuligheder for kolonner
skal du ændre bredden af din browser:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 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 er,
at den tilpasser antallet af kolonner under
beholderens 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-columns: repeat(auto-fit, minmax(150px, 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 beholderen kolonnen vil optage.
Her vil størrelsen af kolonnen først blive beregnet
i %, og den resterende ledige plads
bliver opdelt i fraktioner:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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 ved hjælp af 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 har 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
Lad os nu i tabellen fra det forrige eksempel 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-rows,
som angiver antallet og bredden af rækker i griddet -
egenskaben
grid-auto-columns,
som angiver antallet og bredden af kolonner i det implicitte grid
