Sifa grid-template-rows
Sifa grid-template-rows inabainisha
idadi na upana wa safu mlalo ambazo
kipengele kitachukua kwenye gridi au wavu.
Kwa thamani ya sifa tunabainisha upana wa safu mlalo
kwa vyombo vyovyote
vya ukubwa.
Sifa hubainishwa kwenye kipengele-kizazi
na hubainisha upana wa safu mlalo za vipelele-vizazi.
Wakati wa kubainisha thamani kwenye sifa kwa pikseli
ukubwa wa safu mlalo utalingana kabisa nazo.
Kama tutatumia neno auto, basi safu mlalo
zitajaza nafasi yote inayopatikana. Kutumia
kipimo fr (sehemu) humaanisha,
kuwa nafasi yote itagawanywa
katika sehemu sawa. Faida ya
fr ni usawa wake kwa
vyombo au azimio la skrini tofauti,
kwa sababu fr hugawanya tu kwa idadi iliyobainishwa
ya sehemu bila kushikamana na ukubwa maalum wa pikseli.
Kisarufu
kichaguzi {
grid-template-rows: upana wa safu mlalo;
}
Mfano
Wacha tubainishe upana wa safu mlalo kwa vipelele vyetu kwenye gridi:
<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;
}
:
Mfano
Wacha tubainishe safu mlalo ya kwanza na ya tatu upana maalum kwa pikseli, na safu mlalo ya pili iachie kujaza nafasi inayopatikana kiotomatiki:
<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;
}
:
Mfano
Sasa kwa kutumia sifa
grid-template-rows
tufanye ili safu mlalo ya kwanza na ya pili
zichukue sehemu moja ya chombo,
na safu mlalo ya tatu - sehemu tatu:
<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;
}
:
Mfano
Thamani zilizobainishwa kwa vyombo fr
zinaweza kuchukua mfumo wa sehemu. Wacha
tubadilishe mfano uliopita, tukibainisha
kwa safu mlalo ya pili na ya tatu upana
kwa nambari za sehemu:
<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;
}
:
Mfano
Wacha kwenye sifa grid-template-rows
tubainishe kitendakazi repeat(),
ambacho kitaeleza chombo kuwa safu zote
tatu mlalo zinapaswa kuwa na upana sawa:
<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;
}
:
Mfano
Sasa wacha tubadilishe mfano uliopita ili kwa safu tatu zilizo sawa iongezewe ya nne, ambayo itachukua sehemu mbili za chombo:
<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;
}
:
Mfano
Wacha tubainishe safu mlalo za kwanza mbili upana wa sehemu moja ya chombo na safu mlalo za mwisho mbili - sehemu mbili:
<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;
}
:
Mfano
Sasa wacha tuweke upana wa safu mlalo
kwa kuchanganya thamani, zilizobainishwa kwa kutumia
kitendakazi repeat() na vyombo huru 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;
}
:
Mfano
Pia kwenye kitendakazi repeat() inaweza kubainishwa
thamani auto-fill, ambayo itajaza
chombo chetu kwa safu mlalo sawa za upana tunahitaji:
<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;
}
:
Mfano
Ni rahisi sana pamoja na auto-fill
kubainisha kitendakazi minmax,
ambacho huweka anuwai ya upana wa safu mlalo
kutoka kwa thamani ya chini hadi ya juu.
Kama upana wa chombo hautoshi kwa safu zote
mlalo, basi baadhi yao zitasogea
kwenye mstari mpya, huku safu mlalo kwenye mstari
zikigawanywa kwa usawa ndani yake. Wacha tubadilishe
mfano uliopita, tukibainisha ndani yake kitendakazi 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;
}
:
Mfano
Sasa wacha tubainishe sifa auto-fit,
ambayo inatofautiana na auto-fill kwa kuwa,
inarekebisha idadi ya safu mlalo kulingana na
upana unaopatikana wa chombo, kupanua au
kuzikandamiza:
<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;
}
:
Mfano
Pia pamoja na fr inaweza
kutumika thamani kwa %, ambayo pia hubainisha
sehemu gani ya chombo itachukuliwa na safu mlalo.
Wakati huo huo kwanza ukubwa wa safu mlalo
utahesabiwa kwa %, na nafasi iliyobaki
itagawanywa katika sehemu:
<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;
}
:
Mfano
Wacha tutumie pamoja sifa
grid-template-columns na
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;
}
:
Mfano
Wacha kwa kutumia sifa
grid-template-columns na
grid-template-rows
tuunde jedwali la seli tisa, zilizopangwa
katika safu tatu mlalo. Na safu mlalo ya pili na ya tatu zitakuwa na upana sawa,
na kila safu wima - upana tofauti:
<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;
}
:
Mfano
Sasa kwenye jedwali la mfano uliopita tufanye safu mlalo ya juu iwe na upana wa sehemu mbili, na safu wima ya kwanza - nusu ya sehemu:
<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;
}
:
Angalia pia
-
sifa
grid-template-columns,
ambayo huweka idadi na upana wa safu wima kwenye gridi -
sifa
grid-auto-rows,
ambayo huweka idadi na upana wa safu mlalo kwenye gridi isiyo wazi
