Omadus grid-template-columns
Omadus grid-template-columns määrab
veergude arvu ja laiuse, mida
element hõivab võres või ruudustikus.
Omadus määratakse vanem-elemendis
ja määrab laste-elementide veergude laiuse.
Omaduse väärtuses määrame veergude laiuse
suvalistes mõõtühikutes
mõõtude jaoks.
Kui omadustes määratakse väärtused pikslites,
vastavad veergude mõõtmed neile täpselt.
Kui määrame sõna auto, siis veerud
täidavad kogu saadaoleva ruumi. Ühiku
fr (murd) kasutamine tähendab,
et kogu ruum jaguneb
võrdseteks osadeks. Eeliseks
fr on selle kohanduvus
erinevatele konteineritele või ekraani eraldusvõimele,
kuna fr lihtsalt jagab need määratud
arvuks murdudeks ilma täpse pikslite suurusega sidumata.
Süntaks
valija {
grid-template-columns: veeru laius;
}
Näide
Määrame meie elementide veergude laiuse võres:
<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;
}
:
Näide
Määrame esimesele ja kolmandale veerule fikseeritud laiuse pikslites, ja teine veer täidagu automaatselt kogu saadaoleva ruumi:
<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;
}
:
Näide
Nüüd teeme omaduse
grid-template-columns abil
nii, et esimene ja teine
veer hõivaksid konteineri ühe osa,
ja kolmas veerg - kolm osa:
<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;
}
:
Näide
Ühikutes fr määratud väärtused
võivad olla murdarvulised. Muudame
eelmist näidet, määrates
teise ja kolmanda veeru laiuse
murdarvudes:
<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;
}
:
Näide
Määrame omaduses grid-template-columns
funktsiooni repeat(),
mis teatab konteinerile, et kõik
kolm veergu peavad olema sama laiusega:
<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;
}
:
Näide
Nüüd muudame eelmist näidet nii, et kolmele samale veerule lisanduks neljas, mis hõivab kaks konteineri murdu:
<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;
}
:
Näide
Määrame esimatele kahele veerule laiuse ühes murrus konteinerist, ja viimastele kahele veerule - kahes murrus:
<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;
}
:
Näide
Nüüd määrame veergude laiuse
kombineerides funktsiooni repeat()
ja vabu ühikuid fr abil määratud väärtusi:
<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;
}
:
Näide
Samuti saab funktsioonis repeat() määrata
väärtuse auto-fill, mis täidab
meie konteineri samade veergudega meile vajaliku laiusega:
<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;
}
:
Näide
Väga mugav on koos auto-fill-ga
määrata funktsiooni minmax,
mis määrab veergude laiuse vahemiku
minimaalsest kuni maksimaalse väärtuseni.
Kui konteineri laius ei mahu kõik
veerud, siis mõned neist liiguvad
uuele reale, kusjuunes read
jaotuvad reas ühtlaselt. Muudame
eelmist näidet, määrates selles funktsiooni minmax.
Veergude erinevate paigutuste nägemiseks
muutke oma brauseri lehe laiust:
<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;
}
:
Näide
Nüüd määrame omaduse auto-fit,
mille erinevus auto-fill-st seisneb selles,
et see kohandab veergude arvu
konteineri saadaoleva laiusega, laiendades või
kitsendades neid:
<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;
}
:
Näide
Samuti saab koos fr-ga
kasutada väärtusi %-s, mis samuti määravad
mil osa konteinerist veerg hõivab.
Sel juhul arvutatakse kõigepealt
veeru suurus %-s, ja ülejäänud vaba ruum
jagatakse murdudeks:
<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;
}
:
Näide
Kasutame koos omadusi
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;
}
:
Näide
Loome omaduste
grid-template-columns ja
grid-template-rows abil
tabeli üheksast lahtrist, mis asuvad
kolmes reas. Kusjuures teisel ja kolmandal real on sama laius,
ja iga veerg - erinev laius:
<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;
}
:
Näide
Nüüd teeme eelmise näite tabelis ülemise rea laiuseks kaks murdu, ja esimese veeru - pooleks murduks:
<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;
}
:
Vaata ka
-
omadus
grid-template-rows,
mis määrab ridade arvu ja laiuse võres -
omadus
grid-auto-columns,
mis määrab veergude arvu ja laiuse kaudses võres
