Grid Area dan Template Areas

Menggambar layout dengan teks

grid-template-areas memungkinkanmu "menggambar" layout pakai string teks. Setiap nama adalah area, dan kamu menempatkan item ke area tersebut.

.halaman {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
}

Lihat betapa visualnya: header membentang dua kolom, sidebar di kiri konten, footer membentang penuh. Tiap baris string = satu baris grid, tiap kata = satu kolom.

Menempatkan item ke area

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

Nama area bebas kamu tentukan (tanpa spasi). Area berbentuk persegi panjang: nama yang sama harus membentuk kotak utuh, tidak boleh berbentuk L.

<div class="halaman">
  <header class="header">...</header>
  <aside class="sidebar">...</aside>
  <main class="konten">...</main>
  <footer class="footer">...</footer>
</div>

Sel kosong dengan titik

.halaman {
  grid-template-areas:
    "header header header"
    "sidebar konten konten"
    "sidebar konten konten"
    ". footer footer";
}

Titik . berarti sel kosong. Berguna buat layout yang tidak simetris.

Responsif jadi mudah dibaca

Keunggulan terbesar template areas: mengubah layout per breakpoint tinggal menggambar ulang.

.halaman {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
}

@media (max-width: 768px) {
  .halaman {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "konten"
      "sidebar"
      "footer";
  }
}

Di HP, sidebar pindah ke bawah konten. Cukup ubah gambarnya, tanpa menyentuh HTML sama sekali. Inilah kenapa banyak developer jatuh cinta pada Grid.

Penempatan manual dengan garis

Alternatif tanpa nama area: tunjuk garis grid langsung.

.konten {
  grid-column: 2 / 4; /* dari garis 2 sampai garis 4 */
  grid-row: 1 / 3;
}

Berguna buat item yang spanning (membentang beberapa sel) tanpa perlu template areas.

Catatan teknis: grid-template-areas butuh jumlah kolom yang konsisten di tiap baris string. Kalau satu baris punya 2 kata dan lainnya 3, seluruh deklarasi dianggap tidak valid dan layout rusak total. Error ini diam-diam (tidak ada pesan di console), jadi hitung kata-katanya dengan teliti.

Rangkuman

Gambar layout dengan grid-template-areas, tempatkan item dengan grid-area, pakai titik buat sel kosong. Responsif tinggal menggambar ulang per breakpoint. Untuk spanning cepat tanpa nama, tunjuk garis grid langsung dengan grid-column/grid-row.