Tayyade grid-template-areas da gaba da rukunan grid da suka amsa yadda suke aiki?

Question

IT Interview Practice · Accepted Answer

`grid-template-areas` yana ba ka damar in ka tsara grid **a jiya** ta hanyar ba wa rankumin suna, wanda ya sa hadaddun tsarake na shafuka zai zama mai karewa kuma saukar azaman mai amsa.

## Wajen sa'ad da sanunan rankumi

```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; }
```

`grid-template-areas` ASCII-art *ita ce* tsarake — za ka iya ganin tsari a lokaci gida, kuma maimaita suna yana sa rankumi in yi tsawo a cellss.

## Sake tsarawa don kasuwa — kawai zura taswira

```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";
  }
}
```

Don canza duk tsarake kasuwa don kasuwa, kawai sake rubutu taswira rankumi — HTML da `grid-area` suna gida. Wannan ya fi tsafi fiye da sake jiyan kowa hanya kawai.

## Me yasa wannan ya yi karfi

- **Rubuce-rubuce niyyarsa** — CSS yana nuna jiya tsarake.
- **Bawule daga tsarin tushe** — za a iya sani element a waje kofa kwata-kwata da tsarin HTML (daidai gida raba `main` a farko a DOM don samun shawara, amma nuna abin saba a jiya na farko).
- **Sauki reply sake tunani** — canja rankumi template a wannan breyiki.

## Me yasa haka ya tattara

Sanuna rankumi grid suna sa tsarake a matakin page (gida/gefen waje/babbar abu/gida) karewaye da saukar azaman mai amsa — sake tsarawa ta hada waje ba harusa na taswira ASCII ba, ba sake saita waje ba.

Ita ce iyari gida daidai da tsarake CSS ke bayarwa cewa kusan cikakke da saukar jiya.

Wajen sa'ad da sanunan rankumi

Sake tsarawa don kasuwa — kawai zura taswira

Me yasa wannan ya yi karfi

Me yasa haka ya tattara

Tambayoyi masu alaƙa