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 25

Share On:

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

Post zinazofanana:

CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition

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...
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 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 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 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

Soma Zaidi...
CSS - SOMO LA 25: CSS Shorthand Properties

Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.

Soma Zaidi...
CSS - SOMO LA 24: CSS Variables (Custom Properties)

Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.

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 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...
CSS - SOMO LA 16: Flexbox Basics

Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.

Soma Zaidi...