Egenskapen grid-template-columns
Egenskapen grid-template-columns anger
antalet och bredden på de kolumner som
elementet kommer att uppta i ett rutnät eller grid.
Egenskapen anges i föräldraelementet
och bestämmer bredden på kolumnerna för barnelementen.
I egenskapens värde anger vi kolumnbredderna
i valfri enhet
för storlekar.
När pixelvärden anges i egenskaperna
kommer kolumnstorlekarna exakt att motsvara dessa.
Om vi anger ordet auto kommer kolumnerna att
fylla all tillgängligt utrymme. Att använda
enheten fr (fraktion) betyder
att allt utrymme kommer att delas upp
i lika delar. Fördelen med
fr är dess anpassningsförmåga till
olika behållare eller skärmupplösningar,
eftersom fr helt enkelt delar upp dem i det angivna
antalet fraktioner utan koppling till en exakt storlek i pixlar.
Syntax
selektor {
grid-template-columns: kolumnbredd;
}
Exempel
Låt oss ange kolumnbredder för våra element i rutnätet:
<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;
}
:
Exempel
Låt oss ange en fast bredd i pixlar för första och tredje kolumnen, medan den andra kolumnen fyller automatiskt ut tillgängligt utrymme:
<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;
}
:
Exempel
Och nu med hjälp av egenskapen
grid-template-columns
gör vi så att första och andra
kolumnen tar upp en del av behållaren,
och den tredje kolumnen - tre delar:
<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;
}
:
Exempel
Värden angivna i enheten fr
kan ta bråkform. Låt oss
ändra föregående exempel genom att ange
bredden för den andra och tredje kolumnen
i decimaltal:
<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;
}
:
Exempel
Låt oss i egenskapen grid-template-columns
ange funktionen repeat(),
som talar om för behållaren att alla
tre kolumner ska ha samma bredd:
<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;
}
:
Exempel
Och låt oss nu ändra föregående exempel så att till de tre likadana kolumnerna läggs en fjärde, som tar upp två fraktioner av behållaren:
<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;
}
:
Exempel
Låt oss ange för de två första kolumnerna en bredd på en fraktion av behållaren, och för de två sista kolumnerna - två 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;
}
:
Exempel
Och låt oss nu ställa in kolumnbredderna
genom att kombinera värden, angivna med hjälp av
funktionen repeat() och fria 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;
}
:
Exempel
Även i funktionen repeat() kan man ange
värdet auto-fill, som fyller
vår behållare med likadana kolumner med önskad bredd:
<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;
}
:
Exempel
Det är mycket bekvämt att tillsammans med auto-fill
ange funktionen minmax,
som sätter ett intervall för kolumnbredderna
från ett minimivärde till ett maximivärde.
Om behållarens bredd inte rymmer alla
kolumner kommer några av dem att flyttas
ned till en ny rad, medan kolumnerna på raden
jämnt fördelas i den. Låt oss ändra
föregående exempel genom att ange funktionen minmax i det.
För att se olika placeringsalternativ för kolumner,
ändra bredden på din webbläsares sida:
<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;
}
:
Exempel
Låt oss nu ange egenskapen auto-fit,
vilket skiljer sig från auto-fill genom att
den anpassar antalet kolumner efter
behållarens tillgängliga bredd, genom att utvidga eller
komprimera 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;
}
:
Exempel
Förutom fr kan man också
använda värden i %, som också anger
vilken del av behållaren som kolumnen ska uppta.
Då kommer storleken på kolumnen först att beräknas
i %, och det återstående lediga utrymmet
kommer att delas upp 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;
}
:
Exempel
Låt oss använda egenskaperna
grid-template-columns och
grid-template-rows tillsammans:
<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;
}
:
Exempel
Låt oss med hjälp av egenskaperna
grid-template-columns och
grid-template-rows
skapa en tabell med nio celler, placerade
i tre rader. Dessutom kommer den andra och tredje raden att ha samma bredd,
och varje kolumn - olika bredd:
<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;
}
:
Exempel
Och nu i tabellen från föregående exempel gör vi så att den övre raden blir två fraktioner bred, och den första kolumnen - 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 även
-
egenskapen
grid-template-rows,
som anger antalet och bredden på rader i ett rutnät -
egenskapen
grid-auto-columns,
som anger antalet och bredden på kolumner i ett implicit rutnät
