Ominaisuus grid-template-rows
Ominaisuus grid-template-rows määrittää
rivien määrän ja leveyden, jotka
elementti vie gridissä tai verkossa.
Ominaisuuden arvossa määritämme rivien leveydet
missä tahansa koko-yksiköissä.
Ominaisuus määritetään vanhempielementissä
ja määrittää lapsielementtien rivien leveydet.
Kun ominaisuuksissa määritetään arvoja pikseleinä,
rivien koot vastaavat tarkasti niitä.
Jos annamme sanan auto, rivit täyttävät
kaiken käytettävissä olevan tilan. Yksikön
fr (fraktio) käyttö tarkoittaa,
että koko tila jaetaan
samankokoisiin osiin.
fr:n etuna on sen mukautuvuus
eri säiliöihin tai näytön resoluutioihin,
koska fr yksinkertaisesti jakaa ne ilmoitettuun
määrään fraktioita sitoutumatta tarkkaan kokoon pikseleinä.
Syntaksi
valitsija {
grid-template-rows: rivin leveys;
}
Esimerkki
Määritetään rivien leveys elementeillemme gridissä:
<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;
}
:
Esimerkki
Annetaan ensimmäiselle ja kolmannelle riville kiinteän leveyden pikseleinä, ja toinen rivi 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-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esimerkki
Tehdään nyt ominaisuuden
grid-template-rows avulla
niin, että ensimmäinen ja toinen
rivi vievät yhden osan säiliöstä,
ja kolmas rivi - kolme osaa:
<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;
}
:
Esimerkki
fr-yksiköissä määritetyt arvot
voivat olla murtolukuja. Muutetaan
edellistä esimerkkiä määrittämällä
toiselle ja kolmannelle riville leveys
murtolukuina:
<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;
}
:
Esimerkki
Määritetään ominaisuudessa grid-template-rows
funktio repeat(),
joka kertoo säiliölle, että kaikkien
kolmen rivin tulee olla samanleveät:
<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;
}
:
Esimerkki
Muutetaan nyt edellistä esimerkkiä niin, että kolmeen samanlaiseen riviin 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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esimerkki
Annetaan kahdelle ensimmäiselle riville leveys yksi fraktio säiliöstä, ja kahdelle viimeiselle riville - kaksi fraktiota:
<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;
}
:
Esimerkki
Asetetaan nyt rivien leveydet
yhdistämällä repeat()-funktiolla
määritetyt arvot ja vapaat fr-yksiköt:
<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;
}
:
Esimerkki
Myös repeat()-funktiossa voidaan määrittää
arvo auto-fill, joka täyttää
säiliömme samanlaisilla riveillä halutulla leveydellä:
<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;
}
:
Esimerkki
On erittäin kätevää yhdessä auto-fill:n kanssa
määrittää minmax-funktio,
joka asettaa rivien leveyksien alueen
vähimmäisarvosta enimmäisarvoon.
Jos säiliön leveys ei mahda kaikkia
rivejä, jotkut niistä siirtyvät
uudelle riville, jolloin rivit jaetaan
tasaisesti riville. Muutetaan
edellistä esimerkkiä määrittämällä siinä minmax-funktio:
<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;
}
:
Esimerkki
Määritetään nyt ominaisuus auto-fit,
jonka ero auto-fill:iin verrattuna on,
että se säätää rivien määrän
säiliön käytettävissä olevan leveyden mukaan, laajentaen tai
supistaen niitä:
<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;
}
:
Esimerkki
fr:n ohella voidaan
käyttää arvoja %:ssa, jotka myös määrittävät
minkä osan säiliöstä rivi vie.
Samalla rivin koko
lasketaan ensin %: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-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 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
yhdeksän solun taulukko, joka sijaitsee
kolmella rivillä. Toisella ja kolmannella rivillä on sama leveys,
ja jokaisessa sarakkeessa 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-columns,
joka määrittää sarakkeiden määrän ja leveyden gridissä -
ominaisuus
grid-auto-rows,
joka määrittää rivien määrän ja leveyden implisiittisessä gridissä
