Bagaimanakah grid-template-areas dan grid responsif berfungsi?

Question

Accepted Answer

`grid-template-areas` memungkinkan Anda meletakkan grid **secara visual** dengan menamakan wilayah, menjadikan tata letak halaman yang kompleks mudah dibaca dan mudah disusun ulang secara responsif.

## Menentukan area bernama

```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` *adalah* tata letaknya — Anda dapat melihat strukturnya sekilas, dan mengulangi nama membuat wilayah merentang sel.

## Menyusun ulang untuk seluler — cukup gambar 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 mengubah seluruh tata letak untuk seluler, Anda hanya perlu menulis ulang peta area — HTML dan penugasan `grid-area` tetap sama. Ini jauh lebih bersih daripada memposisikan ulang setiap elemen secara individual.

## Mengapa ini kuat

- **Mendokumentasikan diri sendiri** — CSS secara visual mencerminkan tata letak yang dirender.
- **Terlepas dari urutan sumber** — elemen dapat ditempatkan di mana saja terlepas dari urutan HTML (bagus untuk menempatkan `main` terlebih dahulu di DOM untuk aksesibilitas, namun menampilkan bilah sisi terlebih dahulu secara visual).
- **Aliran responsif yang mudah** — tukar templat area per titik henti.

## Mengapa ini penting

Area grid bernama membuat tata letak tingkat halaman (header/sidebar/main/footer) mudah dibaca dan secara trivial responsif — restrukturisasi hanyalah masalah mengedit peta ASCII, bukan mengkabel ulang posisi.

Ini adalah salah satu teknik tata letak yang paling jelas dan paling mudah dirawat yang ditawarkan CSS.