Situs dokumentasi, panel admin, dan toko daring hampir selalu memakai pola yang sama: kolom sempit berisi navigasi di satu sisi, kolom lebar berisi konten di sisi lain. Dengan CSS Grid, layout ini selesai dalam satu deklarasi grid-template-columns — dan kita mendapatkan bonus yang dulu butuh trik tambahan: sidebar yang tetap terlihat saat halaman digulir. Pada chapter ini kita merakit pola tersebut, dari kolomnya, perilaku sticky-nya, hingga penumpukan di layar sempit.
Dua Kolom dengan minmax #
.layout-halaman {
display: grid;
grid-template-columns: minmax(220px, 260px) 1fr;
gap: 24px;
}Kolom pertama ditulis minmax(220px, 260px): sidebar berhak melebar antara 220 dan 260 piksel mengikuti ruang yang tersedia. Kolom kedua, 1fr, menyerap seluruh sisa lebar untuk konten. Bila kita menulis angka pasti seperti 240px 1fr, sidebar tetap beku di 240 piksel pada semua kondisi; minmax memberi kelonggaran ketika pengguna memperbesar ukuran huruf atau ketika satu item menu bertambah panjang.
Sidebar yang Tetap Terlihat #
.panel-samping {
position: sticky;
top: 24px;
align-self: start;
}position: sticky menempelkan elemen pada posisi gulir tertentu, dan tiga syaratnya terpenuhi di sini: nilai top wajib ada, elemen tetap berada dalam parent-nya, dan align-self: start menghentikan perilaku melar item grid. Syarat ketiga ini mudah terlewat. Secara default item grid membentang setinggi barisnya, dan sidebar setinggi konten tidak punya ruang untuk bergeser sama sekali. Dengan align-self: start, sidebar hanya setinggi isinya, sehingga dapat menempel pada top: 24px selagi halaman digulir.
Menumpuk di Layar Sempit #
@media (max-width: 700px) {
.layout-halaman {
grid-template-columns: 1fr;
}
}Satu deklarasi cukup: tanpa penempatan eksplisit, sidebar dan konten otomatis menumpuk mengikuti urutan markup. Detail media query dan strategi pemilihan breakpoint dibahas tuntas di section Responsive Web Design; di sini kita hanya memastikan pola ini tidak meluber di layar kecil.
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikannya |
|---|---|---|
Sidebar diberi position: sticky tanpa align-self: start | Sidebar membentang setinggi konten sehingga tidak bergerak saat digulir | Tambahkan align-self: start agar tingginya mengikuti isi |
Nilai top tidak ditulis | sticky tidak memiliki posisi tempel dan berperilaku seperti relative | Selalu pasangkan sticky dengan minimal satu nilai top |
Kolom konten ditulis 1fr untuk isi sangat lebar | Tabel atau blok kode memaksa kolom meluber | Pakai minmax(0, 1fr) dan biarkan isinya menggulir |
Demo berikut merangkai ketiga teknik: gulir isi bingkai dan amati navigasi yang tetap menempel, lalu perkecil lebarnya di bawah 700 piksel untuk melihat kedua wilayah menumpuk:
Ringkasan #
Dua kolom, satu deklarasi: minmax(220px, 260px) 1fr memberi sidebar lebar elastis dan konten seluruh sisa ruang, align-self: start plus position: sticky menjaga navigasi tetap terlihat, dan satu media query menumpuk keduanya di layar sempit. Pola berikutnya memperbesar skalanya: halaman dasbor utuh yang menggabungkan sidebar, kartu statistik, grafik, dan tabel dalam satu kesatuan grid.