Pola: Layout Dashboard

Dasbor adalah ujian kelulusan materi grid kita: satu halaman memuat sidebar navigasi, header, kartu-kartu statistik, area grafik, dan tabel rincian — semuanya harus sejajar, responsif, dan tetap mudah dibaca kodenya. Kabar baiknya, tidak ada teknik baru yang dibutuhkan. Kita hanya menggabungkan pola sidebar dari chapter sebelumnya dengan deretan kartu responsif dan penempatan berbasis garis. Inilah bukti bahwa konsep-konsep section ini saling melengkapi.

Anatomi Dasbor #

Struktur dasbor terdiri dari dua tingkat grid: grid halaman di luar, dan grid konten di dalam area isi. Masing-masing wilayah punya teknik yang paling pas:

Tingkat 1: Grid Halaman dengan Named Areas #

.dasbor {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "samping kepala" "samping isi";
  gap: 20px;
}

.menu-samping { grid-area: samping; }
.kepala-dasbor { grid-area: kepala; }
.area-isi { grid-area: isi; }

Named areas dari chapter Grid Template Areas kembali beraksi: nama samping ditulis dua kali sehingga sidebar membentang dua baris, sedangkan header dan area isi berbagi kolom kedua. Ukuran kolomnya mengulang pola minmax dari layout sidebar: navigasi elastis antara 200 dan 240 piksel, sisanya untuk konten.

Tingkat 2: Kartu, Grafik, dan Tabel #

Di dalam area isi, grid kedua mengatur konten:

.area-isi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.panel-grafik { grid-column: span 2; }
.panel-tabel { grid-column: 1 / -1; }

Kartu statistik mengalir seperti deretan produk pada pola responsive card grid. Panel grafik membentang dua kolom agar visualnya cukup lega, dan tabel menutup baris dengan 1 / -1 — selebar penuh apa pun jumlah kolom yang tersisa. Perhatikan pembagiannya: penempatan garis hanya dipakai untuk dua panel istimewa; kartu lainnya mengandalkan auto placement.

Demo berikut merangkai seluruh anatomi menjadi dasbor mini:

Ringkasan #

Dasbor membuktikan bahwa section ini bukan kumpulan trik terpisah: grid halaman memakai named areas, grid konten memakai auto-fit, dan dua panel istimewa memakai penempatan garis — semuanya dalam satu halaman yang sama. Kini seluruh peralatan CSS Grid sudah di tangan kita. Chapter penutup menyusun kerangka keputusan: kapan grid adalah alat yang tepat, dan kapan flexbox lebih pantas dipakai.