Eienskap grid-template-rows
Die eienskap grid-template-rows spesifiseer
die aantal en wydte van rye wat
'n element in die rooster of grid sal beslaan.
In die waarde van die eienskap spesifiseer ons die wydte van rye
in enige eenhede
vir groottes.
Die eienskap word in die ouerelement gespesifiseer
en bepaal die wydte van rye van die afstammelingelemente.
Wanneer waardes in pixels in eienskappe gespesifiseer word,
sal die groottes van die rye presies daarmee ooreenstem.
As ons die woord auto spesifiseer, sal die rye
alle beskikbare spasie vul. Die gebruik van
die eenheid fr (fraksie) beteken
dat alle spasie verdeel sal word
in identiese dele. Die voordeel van
fr is die aanpasbaarheid daarvan by
verskillende houers of skermresolusies,
aangesien fr dit net verdeel in die gespesifiseerde
aantal fraksies sonder om aan 'n presiese pixelgrootte gebonde te wees.
Sintaksis
selekteerder {
grid-template-rows: rywydte;
}
Voorbeeld
Kom ons spesifiseer die wydte van rye vir ons elemente in die rooster:
<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;
}
:
Voorbeeld
Kom ons gee die eerste en derde ry 'n vaste wydte in pixels, en laat die tweede ry outomaties die beskikbare spasie vul:
<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;
}
:
Voorbeeld
En nou maak ons met die eienskap
grid-template-rows
so dat die eerste en tweede
ry een deel van die houer beslaan,
en die derde ry - drie dele:
<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;
}
:
Voorbeeld
Waardes gespesifiseer in eenhede fr
kan breukvorm aanneem. Kom ons
verander die vorige voorbeeld deur
vir die tweede en derde rye wydte
in breukgetalle te spesifiseer:
<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;
}
:
Voorbeeld
Kom ons spesifiseer in die eienskap grid-template-rows
die funksie repeat(),
wat die houer sal meedeel dat alle
drie rye dieselfde wydte moet hê:
<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;
}
:
Voorbeeld
En nou verander ons die vorige voorbeeld sodat by die drie identiese rye 'n vierde een gevoeg word, wat twee fraksies van die houer sal beslaan:
<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;
}
:
Voorbeeld
Kom ons gee die eerste twee rye 'n wydte van een fraksie van die houer, en die laaste twee rye - van twee fraksies:
<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;
}
:
Voorbeeld
En nou laat ons die wydte van rye stel
deur waardes te kombineer, gespesifiseer met behulp van
die funksie repeat() en vrye eenhede fr:
<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;
}
:
Voorbeeld
Ook kan in die funksie repeat() die
waarde auto-fill gespesifiseer word, wat
ons houer sal vul met identiese rye van die nodige wydte vir ons:
<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;
}
:
Voorbeeld
Dit is baie gerieflik om saam met auto-fill
die funksie minmax te spesifiseer,
wat 'n reeks wydtes van rye spesifiseer
van minimum tot maksimum waarde.
As die wydte van die houer nie al die
rye kan bevat nie, sal sommige van hulle verskuif
na 'n nuwe reël, terwyl die rye in die reël
eweredig daarin versprei sal word. Kom ons verander
die vorige voorbeeld deur die funksie minmax daarin te spesifiseer:
<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;
}
:
Voorbeeld
Nou laat ons die eienskap auto-fit spesifiseer,
waarvan die verskil van auto-fill daarin lê,
dat dit die aantal rye aanpas by
die beskikbare wydte van die houer, deur dit uit te brei of
saam te trek:
<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;
}
:
Voorbeeld
Ook kan saam met fr
waardes in % gebruik word, wat ook bepaal
watter deel van die houer die ry sal beslaan.
Hierdie geval sal die grootte van die
ry eers in % bereken word, en die oorblywende vrye spasie
word in fraksies verdeel:
<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;
}
:
Voorbeeld
Kom ons gebruik saam die eienskappe
grid-template-columns en
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;
}
:
Voorbeeld
Kom ons skep met behulp van die eienskappe
grid-template-columns en
grid-template-rows
'n tabel van nege selle, geplaas
in drie rye. En die tweede en derde ry sal dieselfde wydte hê,
en elke kolom - verskillende wydte:
<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;
}
:
Voorbeeld
En nou maak ons in die tabel van die vorige voorbeeld die boonste ry twee fraksies wyd, en die eerste kolom - 'n halwe fraksie:
<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;
}
:
Sien ook
-
die eienskap
grid-template-columns,
wat die aantal en wydte van kolomme in die rooster spesifiseer -
die eienskap
grid-auto-rows,
wat die aantal en wydte van rye in die implisiete rooster spesifiseer
