Coba tulis denah rumah pake kotak-kotak: tiap ruangan kasih nama. Lalu anak kamu cukup baca: "ruang tamu di kanan, dapur di belakang." Kebayang lebih jelas dibanding pake koordinat angka. CSS Grid kasih kemampuan yang sama: alih-alih grid-column: 1 / 3; grid-row: 2, kamu bisa kasih nama tiap area (header, sidebar, content, footer), terus gambar layout-nya pake kata-kata. Lebih enak dibaca, lebih gampang pindah-pindahin.

💡 Magic untuk responsive. Pake grid-template-areas bikin reorder layout di mobile jadi 1 baris CSS aja. Define ulang area di media query, layout berubah total — tanpa rewrite HTML. Ini salah satu pencapaian CSS modern yang paling underrated.

Penempatan item dengan line numbers:

.header {
  grid-column: 1 / 3;   /* Dari kolom 1 sampai 3 (span 2 kolom) */
  grid-row: 1;           /* Di baris 1 */
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 4;      /* Span 2 baris */
}

Bisa juga menggunakan span:

.header {
  grid-column: span 2;  /* Mengisi 2 kolom */
}

Grid Template Areas — cara visual untuk mendefinisikan layout:

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Setiap string adalah satu baris grid. Nama yang sama berarti area tersebut digabung. Gunakan titik . untuk sel kosong:

grid-template-areas:
  "header header"
  "sidebar content"
  ".       footer";

🎭 Analogi sehari-hari

grid-template-areas = denah lantai rumah dalam ASCII art. Kamu gambar denah pakai kata, tiap kotak = ruangan dengan nama. Lebih mudah dibaca daripada koordinat angka (grid-column: 1/3).

⚠️ Jebakan yang sering ditemui

• Jumlah kata per row HARUS sama dengan jumlah kolom — "a b" "c d e" invalid (mismatch).
• Area harus PERSEGI — "a b" "b a" invalid (b zigzag).
• Nama area tidak boleh ada spasi — "my header" jadi 2 area my dan header.
• . (titik) untuk sel kosong — bukan tanda kosong literal.
• Mobile-first responsive sangat manis dengan grid-areas — define ulang grid-template-areas di media query, layout berubah total.
• Tidak semua item harus pakai grid-area — child tanpa nama auto-place ke cell yang tersedia.

🧪 Tebakan cepat — baca grid-template-areas. Tanpa render, tebak layout-nya:

grid-template-areas:
  "logo  nav   nav   nav"
  "side  main  main  ads"
  "side  main  main  ads"
  "foot  foot  foot  foot";

Jawaban: 4 kolom × 4 baris. Logo pojok kiri-atas (1×1), nav span 3 kolom di atas, sidebar kiri (1 kolom × 2 baris), main content tengah (2×2 area), ads kanan (1×2), footer span penuh di bawah. Cara baca grid-areas: bayangin tabel ASCII — nama sama yang nempel = digabung, beda nama = cell terpisah.