CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
📘 Utangulizi
CSS Grid ni mfumo wa kisasa unaotumika kupanga vipengele vya tovuti kwenye muundo wa mistari ya safu na nguzo. Tofauti na Flexbox unaopanga kwa mwelekeo mmoja, Grid huwezesha kupanga kwa mwelekeo wa safu na nguzo kwa wakati mmoja, hivyo kutoa udhibiti mkubwa wa layout.
📚 Maudhui ya Somo
✅ 1. display: grid
-
Hufanya elementi ya mzazi kuwa grid container.
-
Elementi za ndani huitwa grid items.
.container {
display: grid;
}
✅ 2. grid-template-columns
-
Hufafanua nguzo za grid.
-
Unaweza kutumia px, %,
fr(fraction of space), n.k.
.container {
grid-template-columns: 200px 1fr 2fr;
}
💡 Mfano huu unaonyesha nguzo 3: ya kwanza 200px, ya pili 1 sehemu, na ya tatu 2 sehemu.
✅ 3. grid-template-rows
-
Hufafanua urefu wa safu.
.container {
grid-template-rows: 100px 100px;
}
💡 Hii inaunda safu mbili, kila moja ikiwa na urefu wa 100px.
✅ 4. gap
-
Hutoa nafasi kati ya safu au nguzo.
.container {
gap: 20px;
}
-
Pia unaweza kutumia:
-
row-gap: 10px; -
column-gap: 15px;
-
✅ 5. grid-column na grid-row
-
Hufafanua nafasi element inayoichukua kwenye safu au nguzo.
.item1 {
grid-column: 1 / 3; /* Inachukua nguzo ya 1 hadi 3 */
grid-row: 1 / 2; /* Inakaa kwenye safu ya 1 */
}
💡 Hii husaidia kuunda layout za aina tofauti bila kutumia positioning ya ziada.
✅ 6. Mfano Kamili
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item-wide">3</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
}
.item-wide {
grid-column: 1 / 3;
}
✅ Hitimisho
CSS Grid ni suluhisho kamili la kupanga vipengele kwenye layout ya safu na nguzo. Kwa kutumia grid-template-columns, grid-template-rows, gap, grid-column, na grid-row, unaweza kubuni layout ya kisasa kwa urahisi na usahihi.
🔜 Somo Linalofuata: SOMO LA 19 - Box Model katika CSS
Katika somo lijalo tutajifunza kuhusu margin, border, padding, na content, na jinsi vinavyofanya kazi kwa pamoja katika mpangilio wa elementi.
🧠Maswali ya Kujitathmini
-
display: grid;hufanya nini?
a) Hupanga elementi kwa mistari ya mlalo tu
b) Huziweka kwenye layout ya safu na nguzo
c) Huzifanya ziwe hidden
d) Huzipa background -
Ili kuunda nguzo tatu zenye ukubwa sawa, utatumia:
a)grid-template-rows: 1fr 1fr 1fr;
b)grid-template-columns: 1fr 1fr 1fr;
c)display: flex;
d)column-gap: 3px; -
gap: 10px;ina maana gani?
a) Margin kati ya container na item
b) Nafasi kati ya text
c) Nafasi kati ya safu na nguzo za grid
d) Urefu wa border -
Ili element ichukue nguzo ya 1 hadi 3, utatumia ipi?
a)grid-row: 1 / 3;
b)grid-column: 1 / 3;
c)column-span: 2;
d)grid: full; -
grid-template-rows: 100px 200px;inamaanisha nini?
a) Nguzo mbili
b) Safu mbili, ya kwanza 100px na ya pili 200px
c) Urefu wa content
d) Padding ya ndani
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 Bongolite - Game zone - Play free game 👉2 Dua za Mitume na Manabii 👉3 web hosting 👉4 Simulizi za Hadithi Audio 👉5 Madrasa kiganjani 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - SOMO LA 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...CSS - SOMO LA 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...CSS - SOMO LA 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...