Dashboard Layout

Dashboard aplikasi punya kebutuhan yang berbeda dari halaman konten: tingginya terkunci setinggi viewport, sidebar dan header tetap di tempat, dan hanya area data di tengah yang bergulir. Resep grid area bernama menyatakan kerangka itu sebagai “peta” yang terbaca sekali pandang — dua baris string yang menunjukkan posisi setiap panel. Resep ini adalah fondasi yang sama dengan pola holy grail pada chapter Three-column Layout , tinggal menambah tinggi viewport dan area bergulir.

Resep Dasbor Area Bernama #

body { margin: 0; }
.dasbor {
  display: grid;
  height: 100dvh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}
.atas  { grid-area: header; }
.sisi  { grid-area: sidebar; }
.utama { grid-area: main; overflow-y: auto; }

HTML-nya tiga panel dengan nama yang sama seperti areanya:

<div class="dasbor">
  <header class="atas">
    <strong>Panel Penjualan</strong>
    <button type="button">Ekspor Laporan</button>
  </header>
  <nav class="sisi">
    <ul>
      <li>Ringkasan</li>
      <li>Transaksi</li>
      <li>Pengaturan</li>
    </ul>
  </nav>
  <main class="utama">
    <!-- kartu-kartu statistik -->
  </main>
</div>

Hasil di Browser:

Pada viewport 1280x720: computed .dasbor display grid dengan
height 720px (100dvh). Header menempati area "header" setinggi
64px, sidebar selebar 240px (grid-area "sidebar"), dan area utama
membawa overflow-y: auto sehingga menggulir sendiri tanpa
menggerakkan header maupun sidebar.

Mari kita telaah deklarasi kuncinya:

1. grid-template-areas: string denah dua baris. header ditulis dua kali pada baris pertama karena membentang dua kolom; sidebar dan main berdampingan pada baris kedua (lihat grid-lines-dan-areas ).
2. grid-area: header dan seterusnya: setiap panel cukup menyebut nama areanya — tidak ada angka garis yang harus dihitung. Di DevTools, computed grid-area pada header tampil sebagai header.
3. height: 100dvh + grid-template-rows: 64px 1fr: tinggi keseluruhan dikunci setinggi viewport; baris header dikunci 64px dan baris sisa (1fr) menjadi milik panel konten.
4. overflow-y: auto pada .utama: area konten menjadi scroll container tersendiri. Menggulir di area itu tidak menggerakkan header maupun sidebar — persis perilaku aplikasi web pada umumnya.

Dua detail kecil menyempurnakan resep ini. Pertama, bila konten beralih antara muat dan tidak muat, scrollbar yang muncul-hilang menggeser lebar panel; scrollbar-gutter: stable pada .utama menyisakan celah scrollbar secara permanen sehingga kartu tidak melompat posisi (lihat MDN untuk scrollbar-gutter ). Kedua, panel data tambahan cukup menjadi anak .utama — dalam demo chapter ini, empat kartu statistik tersusun dengan grid repeat(2, 1fr) di dalam area bergulir; grid di dalam grid seperti ini lazim dan tidak saling mengganggu. Untuk menu yang menimpa area konten, setel z-index pada panel yang harus berada di atas, karena panel dengan position: sticky atau z-index membentuk konteks penumpukan sendiri (lihat stacking-context ).

Menambah Panel dan Menyusun Ulang #

Keunggulan area bernama terasa saat denah berubah. Menambah panel ringkasan di kanan berarti memperluas string denah, bukan menulis ulang penempatan semua panel:

.dasbor {
  grid-template-columns: 240px 1fr 320px;
  grid-template-areas:
    "header header header"
    "sidebar main panel";
}

Untuk layar sempit, sidebar diubah menjadi strip horizontal di bawah header dan tinggi barisnya mengikuti isi:

@media (max-width: 800px) {
  .dasbor {
    grid-template-columns: 1fr;
    grid-template-rows: 56px auto 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }
}

Kedua perubahan hanya menyentuh denah dan ukuran track — deklarasi grid-area pada tiap panel tidak berubah sama sekali. Inilah alasan area bernama lebih mudah dirawat daripada penempatan berbasis nomor garis untuk kerangka halaman.

Terakhir, soal lebar: dashboard aplikasi biasanya melebar penuh, tetapi pada monitor sangat lebar baris data yang membentang 1920px justru sulit dibaca. Bungkus .dasbor dengan wadah terpusat dari chapter Centered Container , dan bila konten boleh melampaui tinggi viewport, ganti height: 100dvh menjadi min-height: 100dvh — halaman kemudian kembali menggulir seperti biasa setelah area utama habis.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi display: grid dan height 720px pada wadah, tinggi header 64px dengan grid-area “header”, lebar sidebar 240px, dan overflow-y: auto pada area utama.