Die eienskap grid-template-columns
Die eienskap grid-template-columns spesifiseer
die aantal en breedte van kolomme wat
'n element in 'n rooster sal beset.
Die eienskap word in die ouerelement gespesifiseer
en bepaal die breedte van die kolomme van die kindelemente.
In die waarde van die eienskap spesifiseer ons die breedte van die kolomme
in enige eenhede
vir groottes.
Wanneer waardes in pixels in die eienskappe gespesifiseer word,
sal die kolomgroottes presies daarmee ooreenstem.
As ons die woord auto spesifiseer, sal die kolomme
alle beskikbare spasie vul. Die gebruik van
die eenheid fr (fraksie) beteken,
dat alle spasie opgedeel sal word
in gelyke dele. Die voordeel van
fr is die aanpasbaarheid daarvan by
verskillende houers of skermresolusies,
aangesien fr dit eenvoudig verdeel in die gespesifiseerde
aantal fraksies sonder om vas te wees aan 'n presiese grootte in pixels.
Sintaksis
selektor {
grid-template-columns: kolombreedte;
}
Voorbeeld
Laat ons die breedte van kolomme spesifiseer vir ons elemente in die rooster:
<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;
}
:
Voorbeeld
Laat ons vir die eerste en derde kolom 'n vaste breedte in pixels spesifiseer, en laat die tweede kolom outomaties die beskikbare spasie vul:
<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;
}
:
Voorbeeld
Laat ons nou met behulp van die eienskap
grid-template-columns
maak dat die eerste en tweede
kolom een deel van die houer beset,
en die derde kolom - drie 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;
}
:
Voorbeeld
Waardes, gespesifiseer in eenhede fr
kan breukwaarde aanneem. Laat ons
die vorige voorbeeld verander deur
vir die tweede en derde kolom breedte
in breukgetalle te spesifiseer:
<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;
}
:
Voorbeeld
Laat ons in die eienskap grid-template-columns
die funksie repeat() spesifiseer,
wat die houer sal meedeel dat alle
drie kolomme dieselfde breedte moet hê:
<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;
}
:
Voorbeeld
Laat ons nou die vorige voorbeeld verander sodat by die drie identiese kolomme 'n vierde gevoeg word, wat twee fraksies van die houer sal beset:
<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;
}
:
Voorbeeld
Laat ons vir die eerste twee kolomme 'n breedte van een fraksie van die houer spesifiseer, en vir die laaste twee kolomme - twee fraksies:
<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;
}
:
Voorbeeld
Laat ons nou die breedte van kolomme spesifiseer
deur waardes te kombineer, gespesifiseer met behulp van
die funksie repeat() en vrye eenhede 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;
}
:
Voorbeeld
Ook in die funksie repeat() kan ons
die waarde auto-fill spesifiseer, wat
ons houer sal vul met identiese kolomme van die nodige breedte vir ons:
<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;
}
:
Voorbeeld
Dit is baie gerieflik om saam met auto-fill
die funksie minmax te spesifiseer,
wat 'n reeks breedtes vir kolomme spesifiseer
van 'n minimum tot 'n maksimum waarde.
As die breedte van die houer nie al die
kolomme kan huisves nie, sal sommige daarvan verskuif
na 'n nuwe ry, terwyl die kolomme in die ry
gelykmatig daarin verdeel sal word. Laat ons die
vorige voorbeeld verander deur die funksie minmax daarin te spesifiseer.
Om verskillende variante van kolomplasings te sien
verander die breedte van jou blaaier se bladsy:
<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;
}
:
Voorbeeld
Laat ons nou die eienskap auto-fit spesifiseer,
waarvan die verskil van auto-fill daarin lê,
dat dit die aantal kolomme aanpas by die
beskikbare breedte van die houer, deur dit uit te brei of
saam te trek:
<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;
}
:
Voorbeeld
Ook kan saam met fr
waardes in % gebruik word, wat ook bepaal
watter deel van die houer die kolom sal beset.
Hierdie geval sal die grootte van die kolom eers
in % bereken word, en die oorblywende vrye spasie
word opgedeel in fraksies:
<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;
}
:
Voorbeeld
Laat ons saam die eienskappe
grid-template-columns en
grid-template-rows gebruik:
<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;
}
:
Voorbeeld
Laat ons met behulp van die eienskappe
grid-template-columns en
grid-template-rows
'n tabel van nege selle skep, gerangskik
in drie rye. Verder sal die tweede en derde ry dieselfde breedte hê,
en elke kolom - verskillende breedte:
<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;
}
:
Voorbeeld
Laat ons nou in die tabel uit die vorige voorbeeld die boonste ry 'n breedte van twee fraksies maak, en die eerste kolom - 'n halwe fraksie:
<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;
}
:
Sien ook
-
die eienskap
grid-template-rows,
wat die aantal en breedte van rye in 'n rooster spesifiseer -
die eienskap
grid-auto-columns,
wat die aantal en breedte van kolomme in 'n implisiete rooster spesifiseer
