CSS - SOMO LA 18: Grid Layout

? 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

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