Unaundaje muundo wa mpangilio kwa kutumia CSS Grid?

Question

Accepted Answer

**CSS Grid** ni mfumo wa mpangilio wa pande mbili — hudhibiti **safu na nguzo kwa wakati mmoja**, tofauti na mstari mmoja wa Flexbox. Unafafanua grid kwenye container kisha kuweka vipengele ndani yake.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Kipimo cha fr na repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") husambaza nafasi inayopatikana — `1fr 2fr` huigawanya 1:2. `repeat(3, 1fr)` ni njia fupi ya tracks tatu sawa.

## Grid inayojibu BILA media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Mstari huu mmoja huunda grid ya kadi inayojibu kikamilifu: kila nguzo ni angalau `250px`; kivinjari hutoshea **nyingi kadiri inavyowezekana** kwa kila safu na kuziviringisha zilizobaki — kiotomatiki ikienda kutoka nguzo 4 kwenye desktop hadi 1 kwenye mobile. `auto-fit` + `minmax` ni mojawapo ya mifumo inayopendwa zaidi ya Grid.

## Kuweka vipengele kwenye seli kadhaa

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Vipengele vinaweza kuenea kwenye safu/nguzo nyingi, kuwezesha mipangilio ya mtindo wa gazeti ambayo ni vigumu kwa Flexbox.

## Grid dhidi ya Flexbox

- **Grid** — mpangilio wa 2D (safu *na* nguzo): mipangilio ya kurasa, grids za kadi, dashboards.
- **Flexbox** — mpangilio wa 1D (safu moja au nguzo moja): navbars, vikundi vya vitufe, kuweka katikati.

Zinaungana vizuri — seli ya grid yenyewe inaweza kuwa flex container.

## Kwa nini ni muhimu

Grid ndilo zana yenye nguvu zaidi ya mpangilio wa CSS — hushughulikia mipangilio ya ukurasa mzima na grids za kadi zinazojibu kwa usafi, mara nyingi ikibadilisha mbinu za nested-div.

Mfumo unaojibu wa `auto-fit`/`minmax` peke yake huondoa hitaji la media queries nyingi.