Area templat

Layout area bernama melalui grid-template-areas dan penerapan pola holy grail.

Daftar isi

Area templat memberi nama pada wilayah kisi dan menempatkan item ke nama tersebut, sehingga kerangka halaman terbaca seperti gambar susunannya. Topik ini membahas penulisan grid-template-areas, penempatan item melalui grid-area, sel kosong, pendefinisian ulang area pada media query, serta penerapan lengkap pola holy grail sebagai penutup.

Penulisan grid-template-areas#

Properti grid-template-areas menerima satu string untuk setiap baris kisi. Di dalam string, setiap nama mewakili satu sel, nama yang sama pada kolom berurutan membentuk satu area yang melebar, dan titik (.) menandai sel kosong tanpa nama. Jumlah nama pada setiap baris wajib sama dengan jumlah kolom kisi, sehingga string-string itu membentuk sebuah peta.

css Contoh: tiga area bernama dalam dua baris

.halaman {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "kepala kepala"
    "bilah  isi";
}

Deklarasi di atas membentuk area kepala selebar dua kolom pada baris pertama, sedangkan baris kedua terbagi menjadi area bilah dan isi. Spasi di dalam string hanya berfungsi sebagai pemisah, dan rapikan tata letaknya agar nama yang sejajar vertikal terbaca sebagai satu kolom kisi. Urutan baris pada string mengikuti urutan track baris dari atas ke bawah.

Susunan nama di dalam string juga menentukan rentang area secara otomatis. Nama yang muncul dua kali pada baris yang sama membentuk area selebar dua kolom, sedangkan nama yang diulang pada baris berbeda membentuk area dua baris. Sel yang sengaja dibiarkan kosong ditandai titik, dan titik yang berdekatan menandai beberapa sel kosong sekaligus.

Menempatkan item dengan grid-area#

Properti grid-area pada item menerima nama area, dan item itu pun menduduki seluruh sel yang membentuk area tersebut. Penempatan seperti ini tidak menyebut satu nomor garis pun, sehingga perubahan bentuk area pada templat tidak mengubah deklarasi itemnya. Inilah keunggulan utama area bernama dibanding penempatan berbasis nomor garis.

css Contoh: penempatan item ke area bernama

.kepala { grid-area: kepala; }
.bilah  { grid-area: bilah; }
.isi    { grid-area: isi; }

Setiap item di atas menempati area yang namanya sama dengan class-nya, dan kesamaan nama semacam itu hanyalah kebiasaan yang memudahkan pembacaan. Item yang tidak diberi grid-area tetap ditempatkan otomatis pada sel kosong yang tersisa, termasuk sel bertanda titik. Konsekuensinya, penambahan elemen baru tidak memerlukan perubahan templat selama masih ada sel kosong. Apabila dua item diberi nama area yang sama, keduanya bertumpuk di dalam area itu, sehingga satu area idealnya diisi satu item utama.

Mendefinisikan ulang area pada media query#

Kerangka yang sama dapat berubah bentuk antar ukuran layar karena item menempel pada nama, bukan pada nomor garis. Di dalam media query, cukup mendeklarasikan ulang grid-template-areas beserta grid-template-columns milik kontainernya, dan seluruh item mengikuti susunan baru tanpa satu perubahan HTML pun. Perubahan hanya menyentuh deklarasi kontainer, karena posisi setiap item selalu mengikuti nama areanya.

css Contoh: susunan satu kolom pada layar sempit

@media (max-width: 640px) {
  .halaman {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kepala"
      "isi"
      "bilah"
      "kaki";
  }
}

Pada layar sempit, area bilah dipindahkan ke bawah isi dan seluruh kolom digabung menjadi satu. Urutan wilayah pada layar sempit boleh berbeda dari urutannya pada layar lebar karena penempatan hanya mengikuti nama, bahkan wilayah yang tadinya berdampingan dapat ditukar posisinya. Nilai 640 piksel pada contoh hanyalah titik pisah yang dipilih sesuai kebutuhan halaman. Pola semacam ini menggantikan pengaturan urutan manual maupun pengubahan struktur HTML yang dulu lazim dilakukan untuk menyusun ulang halaman.

Pola nyata: halaman holy grail#

Pola holy grail adalah kerangka halaman klasik yang terdiri atas header (kepala halaman), sidebar (bilah samping), area konten utama, dan footer (kaki halaman). Struktur HTML-nya hanya memuat empat wilayah tanpa pembungkus tambahan, karena pembagian baris dan kolom sepenuhnya menjadi pekerjaan grid. grid-template-areas menyusun keempat wilayah itu dalam satu deklarasi yang bentuknya menyerupai susunan akhir halaman, sehingga kerangka ini menjadi contoh penerapan area templat yang paling sering dipakai.

Demo berikut menerapkan pola tersebut lengkap dengan pendefinisian ulang area pada layar sempit. Pada lebar di atas 560 piksel, bilah samping berada di kiri konten, sedangkan pada lebar 560 piksel ke bawah bilahnya pindah ke bawah konten. Amati bahwa berkas HTML tidak berubah antara kedua keadaan tersebut, karena perpindahan wilayah sepenuhnya diatur oleh CSS.

Kode sumber demo

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman holy grail dengan grid-template-areas</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="halaman">
    <header class="kepala">Kepala halaman</header>
    <nav class="bilah">Bilah samping</nav>
    <main class="isi">Konten utama</main>
    <footer class="kaki">Kaki halaman</footer>
  </div>

<style>
/* Demo area templat: pola holy grail dengan grid-template-areas */

body {
  margin: 0;
  font-family: sans-serif;
  background: #e2e8f0;
}

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "kepala kepala"
    "bilah  isi"
    "kaki   kaki";
  min-height: 300px;
}

.kepala {
  grid-area: kepala;
  padding: 12px 16px;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 14px;
}

.bilah {
  grid-area: bilah;
  padding: 12px 16px;
  background: #f8fafc;
  border-right: 1px solid #cbd5e1;
  font-size: 13px;
}

.isi {
  grid-area: isi;
  padding: 12px 16px;
  background: #ffffff;
  font-size: 13px;
}

.kaki {
  grid-area: kaki;
  padding: 10px 16px;
  background: #334155;
  color: #e2e8f0;
  font-size: 12px;
}

@media (max-width: 560px) {
  .halaman {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kepala"
      "isi"
      "bilah"
      "kaki";
  }

  .bilah {
    border-right: none;
    border-top: 1px solid #cbd5e1;
  }
}

</style>
<style>
/* Demo area templat: pola holy grail dengan grid-template-areas */

body {
  margin: 0;
  font-family: sans-serif;
  background: #e2e8f0;
}

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "kepala kepala"
    "bilah  isi"
    "kaki   kaki";
  min-height: 300px;
}

.kepala {
  grid-area: kepala;
  padding: 12px 16px;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 14px;
}

.bilah {
  grid-area: bilah;
  padding: 12px 16px;
  background: #f8fafc;
  border-right: 1px solid #cbd5e1;
  font-size: 13px;
}

.isi {
  grid-area: isi;
  padding: 12px 16px;
  background: #ffffff;
  font-size: 13px;
}

.kaki {
  grid-area: kaki;
  padding: 10px 16px;
  background: #334155;
  color: #e2e8f0;
  font-size: 12px;
}

@media (max-width: 560px) {
  .halaman {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kepala"
      "isi"
      "bilah"
      "kaki";
  }

  .bilah {
    border-right: none;
    border-top: 1px solid #cbd5e1;
  }
}

</style></body>
</html>

Berkas index.css demo mendeklarasikan area kepala, bilah, isi, dan kaki pada kontainer .halaman. Kolom pertama selebar 200 piksel menjadi milik bilah samping, sedangkan kolom kedua menyerap sisa lebar melalui satuan fr. Baris tengah menggunakan satuan 1fr agar area konten menyerap sisa tinggi halaman, sedangkan baris kepala dan kaki mengikuti tinggi kontennya melalui nilai auto. Susunan inilah yang mendefinisikan holy grail secara utuh dalam tiga baris string.

Ringkasan#

grid-template-areas menuliskan kisi sebagai string per baris, dengan nama untuk sel berarea dan titik untuk sel kosong.
grid-area menempatkan item ke nama area, sehingga deklarasi item tidak menyentuh nomor garis.
Area yang tidak berbentuk persegi panjang membuat seluruh deklarasi templat tidak sah dan diabaikan browser.
Mendefinisikan ulang area pada media query mengubah bentuk halaman tanpa mengubah HTML, dan pola holy grail menjadi penerapan lengkapnya.

Referensi#

grid-template-areas — MDN Web Docs — Dokumentasi penulisan area bernama beserta aturan persegi panjang dan sel kosong.
grid-area — MDN Web Docs — Dokumentasi penempatan item ke area bernama beserta bentuk garisnya.
Grid — web.dev — Materi Learn CSS yang membahas grid-template-areas beserta contoh kerangka halaman.