Menempatkan setiap wilayah halaman dengan angka garis bisa dilakukan, tetapi cepat melelahkan: header dari garis 1 sampai 3, sidebar membentang dua baris, dan seterusnya. grid-template-areas menawarkan cara lain yang jauh lebih mudah dibaca: kita menggambar layout sebagai denah teks bernama, persis seperti denah di atas kertas. Setiap elemen kemudian cukup duduk di areanya lewat grid-area. Pada chapter ini kita menyusun layout holy grail — header, sidebar, konten, footer — dan mendefinisikan ulang bentuknya untuk layar sempit.

Memberi Nama Wilayah Grid #

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

Mari kita baca potongan kode di atas:

  1. Satu string = satu baris grid: "header header" adalah baris pertama, "sidebar main" baris kedua, dan "footer footer" baris ketiga.
  2. Satu kata = satu sel: baris pertama terdiri dari dua sel; keduanya bernama header, sehingga area header membentang dua kolom.
  3. Nama berulang = area melebar: nama yang sama berdampingan membentuk satu area persegi panjang.
  4. Ukuran tetap ditangani template: grid-template-columns dan grid-template-rows menentukan lebar serta tinggi tiap track; areas hanya menggambar strukturnya.

Selanjutnya setiap elemen ditempatkan ke areanya:

css 
.kepala-halaman { grid-area: header; }
.panel-samping { grid-area: sidebar; }
.konten-utama { grid-area: main; }
.kaki-halaman { grid-area: footer; }

Demo berikut merakit pola holy grail klasik dengan empat area bernama:

Coba bandingkan markup demo dengan denah di CSS-nya: tidak ada satu property penempatan pun pada masing-masing elemen selain grid-area bernama.

Aturan Penulisan dan Sel Kosong #

Denah areas hanya valid bila memenuhi aturan berikut:

  • Jumlah sel pada setiap baris harus sama.
  • Satu nama harus membentuk persegi panjang utuh; bentuk L tidak diterima browser.
  • Nama bersifat case-sensitive: Header dan header dianggap dua nama berbeda.
  • Sel yang dibiarkan kosong ditandai titik (.).

Contoh memakai titik untuk menciptakan celah di sudut kiri baris tengah:

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

Titik boleh ditulis satu (.) atau berjajar (...); keduanya berarti sel kosong. Contoh ini juga memperlihatkan kebebasan lain: sidebar cukup dipindah ke kanan dengan menukar urutan kata, tanpa menyentuh markup sama sekali.

Menggambar Ulang untuk Layar Sempit #

Kekuatan terbesar areas muncul saat layout perlu berubah bentuk antar ukuran layar. Kita cukup menulis denah baru di dalam media query:

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

Demo berikut memakai denah yang sama; perkecil lebar bingkainya hingga di bawah 640 piksel dan keempat wilayah menumpuk dengan urutan baru:

Pembahasan lengkap media query menunggu di section Responsive Web Design; di sini cukup dicatat bahwa satu deklarasi areas sudah mengubah seluruh susunan halaman.

Ringkasan #

grid-template-areas mengubah layout menjadi denah teks yang bisa dibaca manusia: string melambangkan baris, kata melambangkan sel, titik melambangkan celah, dan grid-area menghubungkan elemen ke namanya. Chapter berikutnya membahas sisi grid yang selama ini tidak terlihat: perbedaan track explicit yang kita definisikan dan track implicit yang dibuat browser saat konten melebihi denah.