Ominaisuus grid-template-columns
Ominaisuus grid-template-columns määrittää
sarakkeiden lukumäärän ja leveyden, jotka
elementti käyttää gridissä tai verkossa.
Ominaisuus määritetään vanhempaelementissä
ja määrittää lapsielementtien sarakkeiden leveydet.
Ominaisuuden arvossa määritämme sarakkeiden leveydet
missä tahansa koko-yksiköissä.
Kun ominaisuuksissa määritetään arvoja pikseleinä,
sarakkeiden koot vastaavat niitä tarkasti.
Jos määritämme sanan auto, sarakkeet täyttävät
kaiken käytettävissä olevan tilan. Yksikön fr (fraktio) käyttö tarkoittaa,
että kaikki tila jaetaan
yhtä suuriin osiin. fr:n etuna
on sen mukautuvuus erilaisiin
säiliöihin tai näytön resoluutioihin,
sillä fr yksinkertaisesti jakaa ne määritettyyn
määrään fraktioita ilman sidosta tarkkaan kokoon pikseleinä.
Syntaksi
valitsija {
grid-template-columns: sarakkeen leveys;
}
Esimerkki
Määritetään sarakkeiden leveys elementeillemme gridissä:
<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;
}
:
Esimerkki
Annetaan ensimmäiselle ja kolmannelle sarakkeelle kiinteä leveys pikseleinä, ja toinen sarake täyttää automaattisesti käytettävissä olevan tilan:
<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;
}
:
Esimerkki
Tehdään nyt ominaisuuden
grid-template-columns avulla
niin, että ensimmäinen ja toinen
sarake vievät yhden osan säiliöstä,
ja kolmas sarake - kolme osaa:
<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;
}
:
Esimerkki
fr -yksiköissä määritetyt arvot
voivat olla murtolukuja. Muutetaan
edellistä esimerkkiä määrittämällä
toiselle ja kolmannelle sarakkeelle leveys
murtolukuina:
<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;
}
:
Esimerkki
Määritetään ominaisuudessa grid-template-columns
funktio repeat(),
joka kertoo säiliölle, että kaikkien
kolmen sarakkeen tulee olla samanleveitä:
<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;
}
:
Esimerkki
Muutetaan nyt edellistä esimerkkiä niin, että kolmeen samanlaiseen sarakkeeseen lisätään neljäs, joka vie kaksi fraktiota säiliöstä:
<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;
}
:
Esimerkki
Annetaan kahdelle ensimmäiselle sarakkeelle leveys yksi fraktio säiliöstä, ja kahdelle viimeiselle sarakkeelle - kaksi fraktiota:
<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;
}
:
Esimerkki
Asetetaan nyt sarakkeiden leveys
yhdistämällä funktiolla repeat()
ja vapailla yksiköillä fr määritetyt arvot:
<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;
}
:
Esimerkki
Myös funktiossa repeat() voidaan määrittää
arvo auto-fill, joka täyttää
säiliömme samanlaisilla sarakkeilla halutulla leveydellä:
<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;
}
:
Esimerkki
On erittäin kätevää yhdessä auto-fill:n kanssa
määrittää funktio minmax,
joka asettaa sarakkeiden leveysalueen
minimiarvosta maksimiarvoon.
Jos säiliön leveys ei mahda kaikkia
sarakkeita, osa niistä siirtyy
uudelle riville, samalla kun sarakkeet rivillä
jakautuvat tasaisesti siihen. Muutetaan
edellistä esimerkkiä määrittämällä siihen funktio minmax.
Nähdäksesi erilaisia sijoitusvaihtoehtoja
vaihda selaimesi sivun leveyttä:
<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;
}
:
Esimerkki
Määritetään nyt ominaisuus auto-fit,
jonka ero auto-fill:iin on siinä,
että se säätää sarakkeiden määrän
säiliön käytettävissä olevan leveyden mukaan, laajentaen tai
kutistaen niitä:
<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;
}
:
Esimerkki
Myös fr:n ohella voidaan
käyttää arvoja %:ssa, jotka myös määrittävät
minkä osan säiliöstä sarake vie.
Tässä tapauksessa ensin lasketaan sarakkeen koko
%:ssa, ja jäljelle jäävä vapaa tila
jaetaan fraktioihin:
<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;
}
:
Esimerkki
Käytetään yhdessä ominaisuuksia
grid-template-columns ja
grid-template-rows:
<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;
}
:
Esimerkki
Luodaan ominaisuuksien
grid-template-columns ja
grid-template-rows avulla
taulukko yhdeksästä solusta, jotka on sijoitettu
kolmeen riviin. Toisella ja kolmannella rivillä on sama leveys,
ja jokaisella sarakkeella on eri leveys:
<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;
}
:
Esimerkki
Tehdään nyt edellisen esimerkin taulukossa ylärivi kaksi fraktiota leveäksi, ja ensimmäinen sarake - puoli fraktiota:
<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;
}
:
Katso myös
-
ominaisuus
grid-template-rows,
joka määrittää rivien lukumäärän ja leveyden gridissä -
ominaisuus
grid-auto-columns,
joka määrittää sarakkeiden lukumäärän ja leveyden implisiittisessä gridissä
