Omadus grid-template-rows
Omadus grid-template-rows määrab
võres või ruudustikus oleva elemendi
ruutude arvu ja laiuse.
Omaduse väärtuses märgime ruutude laiuse
suvalistes mõõtühikutes
mõõtude jaoks.
Omadus märgitakse vanem-elemendis
ja määrab järglaselementide ruutude laiuse.
Kui omadustes märgitakse väärtused pikslites,
vastavad ruutude mõõtmed neile täpselt.
Kui märgime sõna auto, siis ruudud
täidavad kogu saadaoleva ruumi. Ühiku
fr (murd) kasutamine tähendab,
et kogu ruum jagatakse
võrdseteks osadeks. Eeliseks
fr on selle kohanduvus
erinevatele konteineritele või ekraani eraldusvõimele,
kuna fr lihtsalt jagab need märgitud
arvuks murdudeks ilma täpse pikslite suuruse külge sidumata.
Süntaks
valija {
grid-template-rows: ruudu laius;
}
Näide
Määrame oma elementide ruutude laiuse võres:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Määrame esimesele ja kolmandale reale fikseeritud laiuse pikslites, ja teine rida täidagu automaatselt kogu saadaoleva ruumi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Nüüd teeme omaduse
grid-template-rows abil
nii, et esimene ja teine
rida hõivaksid ühe osa konteinerist,
ja kolmas rida - kolm osa:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Ühikutes fr märgitud väärtused
võivad olla murdarvulised. Muudame
eelmist näidet, märkides
teise ja kolmanda rea laiuse
murdarvudes:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Märgime omaduses grid-template-rows
funktsiooni repeat(),
mis teatab konteinerile, et kõik
kolm rida peavad olema sama laiusega:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Nüüd muudame eelmist näidet nii, et kolmele samale reale 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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Määrame esimatele kahele reale laiuse ühes murrus konteinerist, ja viimastele kahele reale - kahes murrus:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Nüüd määrame ridade laiuse
kombineerides väärtusi, mis on märgitud funktsiooni
repeat() ja vabade ühikute fr abil:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Samuti saab funktsioonis repeat() märkida
väärtuse auto-fill, mis täidab
meie konteineri samade ridadega soovitud laiusega:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Väga mugav on koos auto-fill-ga
märkida funktsiooni minmax,
mis määrab ridade laiuse vahemiku
minimaalsest kuni maksimaalse väärtuseni.
Kui konteineri laius ei mahu kõik
read ära, siis mõned neist liiguvad
uuele reale, kusjuures read real
jaotuvad selles ühtlaselt. Muudame
eelmist näidet, märkides selles funktsiooni minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Näide
Nüüd märgime omaduse auto-fit,
mille erinevus auto-fill-st seisneb selles,
et see kohandab ridade arvu
konteineri saadaoleva laiusega, laiendades või
kokku surudes neid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 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 %-ides, mis samuti määravad
millise osa konteinerist hõivab rida.
Sel juhul arvutatakse esmalt
rea suurus %-ides, ja järelejää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-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 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-columns,
mis määrab võres veergude arvu ja laiuse -
omadus
grid-auto-rows,
mis määrab kaudses võres ruutude arvu ja laiuse
