Vipi grid-template-areas na grids zenye kujibu kwa mabadiliko yanaendeshwa?

Question

Accepted Answer

`grid-template-areas` inakuwezesha kupanga grid **kwa macho** kwa kuita maeneo, na kufanya muundo wa kurasa ngumu uwe unasomeka na rahisi kuandika upya bila matatizo ya kujibu.

## Kufafanua maeneo yenye jina

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art `grid-template-areas` *ndio* muundo — unaweza kuona muundo kwa haraka, na kurudia jina kunafanya eneo kusambaza seli.

## Kuandika upya kwa simu — tengeneza upya ramani tu

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Kubadilisha muundo mzima kwa simu, tu andika upya ramani ya eneo — HTML na mgawo wa `grid-area` hubaki sawa. Hii ni safi zaidi kuliko kusonga kila kipengele tofauti.

## Kwa nini hii ina nguvu

- **Inajidokumenti** — CSS inaakisi kwa macho muundo ulioonyeshwa.
- **Imegawanywa na mpangilio wa chanzo** — vipengele vinaweza kuwekwa popote bila kujali mpangilio wa HTML (nzuri kwa kuweka `main` kwanza katika DOM kwa ufikaaji, lakini kuonyesha upau wa upande kwanza kwa macho).
- **Kurudia mtiririko rahisi zenye kujibu** — badilisha kiolezo cha eneo kwa kila sehemu ya kuvunja.

## Kwa nini hii ni muhimu

Maeneo ya grid yenye jina yafanya muundo wa kiwango cha kurasa (kichwa/upande/kuu/chini) kuwa na uneezi na kujibu kwa rahisi — muundo-mzima tena ni jambo la kuhariri ramani ya ASCII, si kuoanisha upya maeneo.

Ni mojawapo ya mbinu za muundo zinazoeleweka sana na zisizohitaji kukamatiana zenye CSS ino-oa.