Sifa grid-template-columns
Sifa grid-template-columns huweka
idadi na upana wa safu wima, ambazo
kipengele kitachukua kwenye gridi au wavu.
Sifa huelezwa kwenye kipengele-kitakuwa-mzazi
na huamua upana wa safu wima za vipergele-vitakuwa-watoto.
Kwenye thamani ya sifa tunaweka upana wa safu wima
kwa vipimo vyovyote
vya saizi.
Wakati wa kubainisha thamani katika sifa kwa pikseli
saizi za safu wima zitafanana kabisa nazo.
Kama tutatumia neno auto, basi safu wima
zitajaza nafasi yote inayopatikana. Kutumia
kipimo fr (fraction) humaanisha,
kuwa nafasi yote itagawanywa
katika sehemu sawa. Faida ya
fr ni umiliki wake wa kukabiliana na
vyombo au azimio tofauti za skrini,
kwa sababu fr hugawa tu kwa idadi iliyobainishwa
ya sehemu bila kushikamana na saizi kamili ya pikseli.
Kisarufi
kichaguli {
grid-template-columns: upana wa safu wima;
}
Mfano
Wacha tuweke upana wa safu wima kwa vipergele vyetu kwenye gridi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Wacha tubainishe safu wima ya kwanza na ya tatu upana maalum kwa pikseli, na safu wima ya pili iachwe ijazie nafasi inayopatikana kiotomatiki:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Sasa kwa kutumia sifa
grid-template-columns
tufanye ili safu wima ya kwanza na ya pili
zichukue sehemu moja ya chombo,
na safu wima ya tatu - sehemu tatu:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Thamani, zilizobainishwa kwa vipimo fr
zinaweza kuchukua mfumo wa sehemu. Wacha
tubadilishe mfano uliopita, tukiweka
kwa safu wima 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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Wacha kwenye sifa grid-template-columns
tuweke kitendakazi repeat(),
ambacho kitamshirikisha chombo, kuwa safu wima zote
tatu zinapaswa kuwa na upana sawa:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Sasa wacha tubadilishe mfano uliopita ili kwa safu wima tatu zilizo sawa kuongezewa 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-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Wacha tuweke safu wima za kwanza mbili upana wa sehemu moja ya chombo na safu wima za mwisho mbili - katika sehemu mbili:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Sasa wacha tuweke upana wa safu wima
kwa kuchanganya thamani, zilizobainishwa kwa kutumia
kitendakazi repeat() na vipimo 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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Pia kwenye kitendakazi repeat() inaweza kubainishwa
thamani auto-fill, ambayo itajaza
chombo chetu kwa safu wima sawa za upana tunachohitaji:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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 wima
kutoka kwa thamani ya chini hadi ya juu.
Kama upana wa chombo hautoshi kwa
safu wima zote, basi baadhi yatahamia
kwenye mstari mpya, huku safu wima kwenye mstari
zikigawanywa kwa usawa ndani yake. Wacha tubadilishe
mfano uliopita, tukiubainisha kitendakazi minmax.
Ili kuona aina tofauti za kuweka safu wima
badilisha upana wa ukurasa wa kivinjari chako:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Sasa wacha tubainishe sifa auto-fit,
tofauti yake na auto-fill iko kwa hili,
kuwa inaingiza idadi ya safu wima 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-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mfano
Pia pamoja na fr inaweza
kutumiwa thamani kwa %, ambazo pia huamua
sehemu gani ya chombo itachukuliwa na safu wima.
Wakati huo huo kwanza utahesabiwa saizi
ya safu wima 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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, zilizowekwa
katika safu mlalo tatu. Na safu mlalo ya pili na ya tatu ziwe 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 - iwe 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-rows,
ambayo huweka idadi na upana wa safu mlalo kwenye gridi -
sifa
grid-auto-columns,
ambayo huweka idadi na upana wa safu wima kwenye gridi isiyo wazi
