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.
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.
display: grid
Hufanya elementi ya mzazi kuwa grid container.
Elementi za ndani huitwa grid items.
.container {
display: grid;
}
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.
grid-template-rows
Hufafanua urefu wa safu.
.container {
grid-template-rows: 100px 100px;
}
💡 Hii inaunda safu mbili, kila moja ikiwa na urefu wa 100px.
gap
Hutoa nafasi kati ya safu au nguzo.
.container {
gap: 20px;
}
Pia unaweza kutumia:
row-gap: 10px;
column-gap: 15px;
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.
<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;
}
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.
Katika somo lijalo tutajifunza kuhusu margin
, border
, padding
, na content
, na jinsi vinavyofanya kazi kwa pamoja katika mpangilio wa elementi.
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.. ?
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...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...Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...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...Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
Soma Zaidi...Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...