Piye cara grid-template-areas lan grid responsive dadi?

Question

Accepted Answer

`grid-template-areas` ngidini sampeyan nggawé layout grid **kanthi visual** kanthi namanake wilayah, sing ndadèkaké layout halaman kompleks dadi mudah dibaca lan gampang direarrange kanthi responsive.

## Nggaké wilayah sing dinami

```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` *inggih menika* layouté — sampeyan bisa deleng struktur ing sekilas, lan mbalèkaké jeneng ndadèkaké wilayah ngrenteg sel-sel.

## Ngarearrange kanggo mobile — cukup nggaké ulang peta

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

Untuk nggaké layout kabèh kanggo mobile, sampeyan mung nggaké ulang peta wilayah — HTML lan assignment `grid-area` tetep padha. Iki luwih resik tinimbang ngaték saben unsur kanthi enggal.

## Apa kang ndadèkaké iki kuwat

- **Ndhewe dokumentasi** — CSS visual namirengake layout sing dirancang.
- **Kapisahan saka pangadilan sumber** — unsur bisa diselèk mana kemawon kaanggep HTML order (apik kanggo nggaké `main` dhisik ing DOM kanggo aksesibilitas, nanging nampilake sidebar dhisik kanthi visual).
- **Reflow responsive gampang** — ganti template wilayah per breakpoint.

## Kenapa iki penting

Wilayah grid sing dinami ndadèkaké layout tingkat halaman (header/sidebar/main/footer) dadi mudah dibaca lan gampang dadi responsive — restruktur yaiku masalah nggaké ulang peta ASCII, ora ngilangi posisi.

Iki salah sawijining teknik layout paling jelas lan mudah dikerjani CSS nawani.