Savybė grid-template-rows
Savybė grid-template-rows nustato
eilučių, kurias elementas užims tinklelyje arba gardelėje,
kiekį ir plotį.
Savybės reikšmėje nurodome eilučių plotį
bet kokiame dydžio vienetų
formate.
Savybė nurodoma tėvinio elemento lygmenyje
ir nustato vaikinių elementų eilučių plotį.
Nurodant savybėse reikšmes pikseliais,
eilučių dydžiai tiksliai atitiks juos.
Jei mes nurodome žodį auto, tada eilutės
užpildys visą prieinamą erdvę. Naudojant
vienetą fr (frakcija) reiškia,
kad visa erdvė bus padalinta
į vienodas dalis. Privalumas
fr yra jo prisitaikymas prie
skirtingų konteinerių ar ekrano raiškos,
nes fr tiesiog padalina jas į nurodytą
frakcijų skaičių be prisirišimo prie tikslaus dydžio pikseliais.
Sintaksė
selektorius {
grid-template-rows: eilutės plotis;
}
Pavyzdys
Apibrėžkime eilučių plotį mūsų elementams tinklelyje:
<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;
}
:
Pavyzdys
Nustatykime pirmai ir trečiai eilutei fiksuotą plotį pikseliais, o antra eilutė tegul automatiškai užpildo prieinamą erdvę:
<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;
}
:
Pavyzdys
Dabar naudodami savybę
grid-template-rows
padarykime, kad pirma ir antra
eilutės užimtų vieną konteinerio dalį,
o trečia eilutė - tris dalis:
<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;
}
:
Pavyzdys
Reikšmės, nurodytos fr vienetais,
gali būti trupmeninės. Pakeiskime
ankstesnį pavyzdį, nurodydami
antrai ir trečiai eilutėms plotį
trupmeniniais skaičiais:
<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;
}
:
Pavyzdys
Savybėje grid-template-rows
nurodykime funkciją repeat(),
kuri praneš konteineriui, kad visos
trys eilutės turi turėti vienodą plotį:
<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;
}
:
Pavyzdys
Dabar pakeiskime ankstesnį pavyzdį taip, kad prie trijų vienodų eilučių pridėtume ketvirtą, kuri užims dvi konteinerio frakcijas:
<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;
}
:
Pavyzdys
Nustatykime pirmoms dviem eilutėms plotį vienoje konteinerio frakcijoje, o paskutinėms dviem eilutėms - dviejose frakcijose:
<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;
}
:
Pavyzdys
Dabar nustatykime eilučių plotį
sujungdami reikšmes, nurodytas naudojant
funkciją repeat() ir laisvus fr vienetus:
<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;
}
:
Pavyzdys
Taip pat funkcijoje repeat() galima nurodyti
reikšmę auto-fill, kuri užpildys
mūsų konteinerį vienodomis mums reikalingo pločio eilutėmis:
<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;
}
:
Pavyzdys
Labai patogu kartu su auto-fill
nurodyti funkciją minmax,
kuri nustato eilučių pločių diapazoną
nuo minimalios iki maksimalios reikšmės.
Jei konteinerio plotis netelpa visų
eilučių, tai kai kurios iš jų persikels
į naują eilutę, o eilutės eilutėje
tolygiai paskirstomos joje. Pakeiskime
ankstesnį pavyzdį, jame nurodydami funkciją 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;
}
:
Pavyzdys
Dabar nurodykime savybę auto-fit,
kurios skirtumas nuo auto-fill yra tas,
kad ji pritaiko eilučių skaičių prie
prieinamo konteinerio pločio, išplečiant arba
suspaudžiant jas:
<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;
}
:
Pavyzdys
Taip pat kartu su fr galima
naudoti reikšmes %, kurios taip pat nustato
kurią konteinerio dalį užims eilutė.
Šiuo atveju pirmiausia bus skaičiuojamas eilutės
dydis %, o likusi laisva erdvė
bus padalinta į frakcijas:
<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;
}
:
Pavyzdys
Naudokime kartu savybes
grid-template-columns ir
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;
}
:
Pavyzdys
Naudodami savybes
grid-template-columns ir
grid-template-rows
sukurkime lentelę iš devynių langelių, išdėstytų
trimis eilutėmis. Be to, antra ir trečia eilutės turės vienodą plotį,
o kiekvienas stulpelis - skirtingą plotį:
<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;
}
:
Pavyzdys
Dabar lentelėje iš ankstesnio pavyzdžio padarykime viršutinę eilutę dviejų frakcijų pločio, o pirmą stulpelį - pusės frakcijos:
<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;
}
:
Taip pat žiūrėkite
-
savybė
grid-template-columns,
kuri nustato stulpelių kiekį ir plotį tinklelyje -
savybė
grid-auto-rows,
kuri nustato eilučių kiekį ir plotį numanomame tinklelyje
