Pola: Sidebar Layout

Layout dua kolom dengan sidebar adalah kerangka paling umum untuk situs dokumentasi, panel admin, dan toko daring. Mesinnya sudah kita kuasai di chapter Pola: Layout Sidebar dan Konten pada section CSS Grid; di sini kita memasangnya pada skala halaman utuh. Perbedaannya penting: kerangka halaman juga memuat header yang membentang di atas kedua kolom, sidebar kini bisa berada di kanan, dan penumpukan mobile harus memperhatikan urutan baca pengguna. Mari kita rakit satu per satu.

Kerangka Halaman: Header, Sidebar, Konten #

Tiga wilayah halaman diatur dengan satu grid dan named areas:

.layout-halaman {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "kepala kepala" "samping isi";
  gap: 24px;
}

.kepala-halaman { grid-area: kepala; }
.panel-samping { grid-area: samping; }
.konten-utama { grid-area: isi; }

Nama kepala ditulis dua kali dalam satu baris area, sehingga header membentang dua kolom sekaligus — inilah cara named areas menyelesaikan masalah yang dengan penempatan garis butuh grid-column: 1 / -1. Kolomnya mengulang pola minmax(220px, 260px) 1fr: sidebar boleh melebar sedikit mengikuti isinya, konten menyerap sisanya.

Demo berikut merakit seluruh kerangka, lengkap dengan penumpukan mobile pada 480 piksel — perkecil lebar bingkai demo sampai di bawah 480 piksel untuk melihat ketiganya menumpuk:

Sidebar yang Tetap Terlihat #

Saat halaman digulir, sidebar navigasi sebaiknya tetap dalam jangkauan:

.panel-samping {
  position: sticky;
  top: 24px;
  align-self: start;
}

Tiga syarat sticky terpenuhi di sini: nilai top wajib ada, elemen tetap berada dalam parent-nya, dan align-self: start menghentikan perilaku item grid yang secara default membentang setinggi barisnya. Tanpa deklarasi ketiga, sidebar setinggi konten tidak punya ruang untuk bergeser sama sekali sehingga sticky-nya tak terlihat. Materi lengkapnya ada di chapter Sticky Positioning dan chapter sidebar CSS Grid — resep di atas adalah bentuk siap pakainya.

Varian: Sidebar di Kanan #

Toko daring dan situs dokumentasi sering meletakkan sidebar di kanan sebagai panel informasi. Dengan named areas, posisinya ditukar tanpa menyentuh markup:

.layout-halaman-kanan {
  grid-template-columns: 1fr minmax(220px, 260px);
  grid-template-areas: "kepala kepala" "isi samping";
}

Perhatikan bahwa urutan markup tidak berubah: header tetap ditulis lebih dulu, lalu konten utama, lalu panel samping. Grid hanya mengatur posisi visual, sehingga urutan baca pembaca layar tetap mengutamakan konten utama — keuntungan memisahkan struktur dari tampilan yang kita pegang sejak awal course ini. Demo berikut memperlihatkan varian kanannya:

Menumpuk di Layar Sempit #

Di layar sempit, kedua kolom bertukar menjadi tumpukan:

@media (max-width: 760px) {
  .layout-halaman {
    grid-template-columns: 1fr;
    grid-template-areas: "kepala" "isi" "samping";
  }
}

Perhatikan detail yang sering terlewat: penumpukan bukan sekadar mengganti kolom menjadi 1fr. Urutan area di tulis ulang juga, sehingga sidebar yang tadinya di kiri justru turun ke bawah konten di tampilan mobile — konten sengaja ditulis lebih dulu agar pengguna ponsel lebih cepat sampai ke inti halaman. Perilaku sticky ikut aman: dalam tumpukan, sidebar hanya setinggi isinya sehingga tidak ada efek samping.

Kesalahan Umum #

Ringkasan #

Sidebar layout pada skala halaman adalah soal named areas yang tertata: header membentang dua kolom, kolom sidebar memakai minmax, dan urutan area ditulis ulang saat menumpuk di mobile. Varian kanan berubah hanya lewat definisi kolom dan area tanpa menyentuh markup. Berikutnya kita mengisi kolom konten itu dengan pola yang paling produktif mengisi halaman mana pun: deretan kartu responsif.