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

.container {
  display: grid;
}

✅ 2. grid-template-columns

.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

.container {
  grid-template-rows: 100px 100px;
}

💡 Hii inaunda safu mbili, kila moja ikiwa na urefu wa 100px.


✅ 4. gap

.container {
  gap: 20px;
}

✅ 5. grid-column na grid-row

.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

  1. 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

  2. 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;

  3. 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

  4. 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;

  5. 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

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 37

Share On:

Facebook WhatsApp
Sponsored links
👉1 Madrasa kiganjani    👉2 kitabu cha Simulizi    👉3 Bongolite - Game zone - Play free game    👉4 Sira ya Mtume Muhammad (s.a.w)    👉5 Kitabu cha Afya    👉6 Kitau cha Fiqh   

Post zinazofanana:

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...
CSS - SOMO LA 28: CSS Timing Functions

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...
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

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 32: Custom Fonts na @font-face

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...
CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

Soma Zaidi...
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...
CSS - SOMO LA 29: CSS z-index na Stacking Context

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...
CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.

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...