Egenskapen grid-template-columns
Egenskapen grid-template-columns angir
antall og bredde på kolonnene som
et element vil oppta i et grid eller et nett.
Egenskapen spesifiseres i foreldreelementet
og definerer bredden på kolonnene til barneelementene.
I verdien til egenskapen angir vi bredden på kolonnene
i alle enheter
for størrelser.
Ved å spesifisere verdier i piksler i egenskapene
vil kolonnestørrelsene nøyaktig tilsvare dem.
Hvis vi angir ordet auto, vil kolonnene
fylle alt tilgjengelig plass. Bruk av
enheten fr (fraksjon) betyr
at all plassen vil bli delt
inn i like andeler. Fordelen med
fr er dens tilpasningsevne til
forskjellige beholdere eller skjermoppløsninger,
siden fr bare deler dem inn i det angitte
antall fraksjoner uten binding til en nøyaktig størrelse i piksler.
Syntaks
velger {
grid-template-columns: kolonnebredde;
}
Eksempel
La oss angi bredden på kolonnene 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-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
La oss gi den første og tredje kolonnen en fast bredde i piksler, og la den andre kolonnen automatisk fylle det tilgjengelige området:
<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
Og nå ved hjelp av egenskapen
grid-template-columns
la oss gjøre slik at den første og andre
kolonnen tar en del av beholderen,
og den tredje kolonnen - tre deler:
<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
Verdier angitt i enheten fr
kan ha brøkform. La oss
endre forrige eksempel ved å angi
for den andre og tredje kolonnen bredde
i desimaltall:
<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
La oss i egenskapen grid-template-columns
angi funksjonen repeat(),
som vil fortelle beholderen at alle
tre kolonner skal ha 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
Og la oss nå endre forrige eksempel slik at til de tre like kolonnene legges en fjerde, som vil ta 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-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Eksempel
La oss gi de to første kolonnene en bredde på en fraksjon av beholderen, og de to siste kolonnene - to fraksjoner:
<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
Og la oss nå sette bredden på kolonnene
vha en kombinasjon av verdier angitt med
funksjonen repeat() og frie enheter 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 funksjonen repeat() kan man angi
verdien auto-fill, som vil fylle
vår beholder med like kolonner med ønsket 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 veldig praktisk sammen med auto-fill
å angi funksjonen minmax,
som setter et spekter for kolonnebredder
fra en minimums til en maksimumsverdi.
Hvis bredden på beholderen ikke har plass til alle
kolonnene, vil noen av dem flyttes
til en ny linje, mens kolonnene på linjen
vil fordeles jevnt på den. La oss endre
forrige eksempel ved å angi funksjonen minmax i den.
For å se forskjellige plasseringsalternativer for kolonner
endrer du bredden på nettleservinduet:
<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
La oss nå angi egenskapen auto-fit,
hvis forskjell fra auto-fill er at
den tilpasser antall kolonner etter
tilgjengelig beholderbredde, og utvider eller
krymper 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
I tillegg til fr kan man
bruke verdier i %, som også definerer
hvilken del av beholderen kolonnen vil oppta.
Samtidig vil størrelsen på kolonnen i %
blir beregnet først, og den gjenværende ledige plassen
vil bli delt inn i fraksjoner:
<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
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 vil den andre og tredje raden ha samme bredde,
og hver kolonne - 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
Og nå i tabellen fra forrige eksempel la oss 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-rows,
som angir antall og bredde på rader i et grid -
egenskapen
grid-auto-columns,
som angir antall og bredde på kolonner i et implisitt grid
