Setelah seluruh perangkat grid dikuasai — track, fr, penempatan garis, area, alignment, dan subgrid — langkah terakhir adalah mengemasnya menjadi resep siap pakai. Tiga pola dalam chapter ini mencakup sebagian besar kebutuhan layout nyata: holy grail untuk kerangka halaman, galeri kartu responsif untuk daftar konten, dan dashboard untuk panel data. Setiap resep disajikan sebagai struktur CSS yang dapat Anda salin lalu sesuaikan, disertai alasan mengapa pola tersebut bekerja.

Holy Grail dengan Grid Dua Belas Kolom #

Layout holy grail terdiri atas header selebar halaman, area konten di tengah, sidebar, dan footer. Dua belas kolom 1fr adalah pilihan klasik karena habis dibagi dua, tiga, empat, dan enam — sehingga hampir semua proporsi halaman dapat dinyatakan sebagai bentangan garis:

css 
.halaman {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: 12px;
}
.header  { grid-column: 1 / 13; }
.sidebar { grid-column: 1 / 3;  grid-row: 2 / 4; }
.main    { grid-column: 3 / 11; }
.aside   { grid-column: 11 / 13; }
.footer  { grid-column: 1 / 13; }

grid-auto-rows: minmax(80px, auto) memberi tinggi minimal setiap baris agar layout tidak menyusut kecil saat kontennya tipis. Sidebar membentang dua baris lewat grid-row: 2 / 4, sehingga area utama dan aside berdampingan di baris yang sama. Versi ringkas pola ini memakai grid-template-areas — sangat terbaca untuk layout sederhana, sementara versi dua belas kolom lebih lentur bila jumlah panel bertambah.

Dari keluarga yang sama lahir pola kolom konten terpusat (centered content column): garis bernama di tepi kiri dan kanan membentang melebihi lebar artikel, sehingga gambar atau kutipan dapat “keluar” dari kolom teks tanpa trik margin negatif:

css 
.artikel {
  display: grid;
  grid-template-columns:
    [penuh-start] minmax(16px, 1fr)
    [isi-start] minmax(0, 720px) [isi-end]
    minmax(16px, 1fr) [penuh-end];
}
.artikel > p   { grid-column: isi-start / isi-end; }
.artikel > aside { grid-column: penuh-start / penuh-end; }

Paragraf mengikuti jalur sempit 720px, sedangkan aside membentang penuh — keduanya dinyatakan lewat nama garis, bukan angka yang harus dihitung ulang.

Galeri Kartu Responsif #

Resep kedua adalah satu baris yang menangani seluruh breakpoint sekaligus:

css 
.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Jumlah kolom menyesuaikan lebar wadah tanpa satu pun media query: wadah sempit menghasilkan satu kolom, wadah lebar menghasilkan empat kolom atau lebih, dan kartu penghuni baris terakhir tetap melebar mengisi ruang. Bila ukuran kartu harus tetap stabil seberapa pun banyak itemnya, ganti menjadi auto-fill sebagaimana dibahas pada Chapter Auto-fit dan Auto-fill.

Dashboard dengan Area Bernama #

Pola ketiga menamai panel dari awal sehingga penataan ulang hanya mengubah string denah:

css 
.dasbor {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 48px 1fr 1fr;
  grid-template-areas:
    "samping atas atas"
    "samping kiri kanan"
    "samping bawah bawah";
  height: 100vh;
  gap: 12px;
}

Enam panel cukup menulis grid-area: atas, grid-area: kiri, dan seterusnya. Struktur 1fr 1fr pada baris kedua dan ketiga membuat panel data berukuran sama, dan penambahan panel baru hanya berarti memperluas denah. Kombinasi pola ini dengan auto-flow: dense menghasilkan dashboard berbentangan bervariasi yang tetap padat.

Berikut HTML yang dipakai demo chapter ini — holy grail berbasis area, konten pada grid dua belas kolom, dan galeri kartu:

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Grid Layout Patterns</title>
  <style>
    .halaman {
      display: grid;
      width: 600px;
      grid-template-columns: 150px 1fr;
      grid-template-rows: 60px 1fr 50px;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    }
    .dua-belas {
      display: grid;
      width: 600px;
      grid-template-columns: repeat(12, 1fr);
    }
    .dua-belas .konten { grid-column: 3 / 11; }
    .galeri { display: grid; width: 600px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  </style>
</head>
<body>
  <div class="halaman">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>
  <div class="dua-belas">
    <div class="konten">Konten membentang kolom 3 sampai 10</div>
  </div>
  <div class="galeri">
    <div>Kartu 1</div><div>Kartu 2</div><div>Kartu 3</div>
  </div>
</body>
</html>

Hasil di Browser:

text 
Holy grail berbasis area pada wadah 600px: sidebar mengikuti kolom
pertama sehingga computed width 150px, dengan header dan footer
membentang dua kolom.
Grid dua belas kolom pada wadah 600px: dua belas track 1fr masing-
masing 50px; konten dengan grid-column: 3 / 11 membentang delapan
kolom sehingga computed width 400px.
Galeri auto-fit dengan tiga kartu: tiga track 200px (track keempat
hasil hitungan di-collapse karena kosong), sehingga setiap kartu
computed width 200px.

Mari kita telaah tiga deklarasi yang menentukan:

  1. Baris 6–9 (.halaman): denah area tiga baris menempatkan empat panel tanpa satu pun deklarasi penempatan pada item — sidebar mewarisi lebar kolom pertama, 150px.
  2. Baris 13 dan 18 (.dua-belas): repeat(12, 1fr) membagi 600px menjadi dua belas track 50px. Bentangan 3 / 11 mencakup kolom 3 hingga 10 — delapan track — sehingga kontennya 400px.
  3. Baris 20 (.galeri): auto-fit menghitung empat track minimal 150px, lalu mencollapse track keempat yang kosong; tiga kartu yang tersisa berbagi 600px menjadi 200px masing-masing.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi lebar sidebar holy grail (150px), lebar konten pada grid dua belas kolom (400px), serta lebar kartu galeri (200px).