Website dokumentasi dan blog punya pola yang sama: satu kolom sempit berisi navigasi di kiri, satu kolom lebar berisi artikel di kanan, dan navigasi itu tetap terlihat meskipun pembaca sudah menggulir jauh ke bawah. Resep ini menggabungkan dua teknik — grid dengan satu kolom berukuran tetap dan position: sticky — ditambah satu deklarasi kecil (align-self: start) yang sering terlewat dan membuat sticky gagal bekerja.

Resep Sidebar dengan Posisi Sticky #

css 
.tata {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  max-width: 1000px;
  margin-inline: auto;
}
.sisi {
  position: sticky;
  top: 24px;
  align-self: start;
}

HTML-nya memakai elemen semantik <aside> untuk navigasi dan <main> untuk artikel panjang:

html index.html 
<div class="tata">
  <aside class="sisi">
    <h2>Materi</h2>
    <ul>
      <li><a href="#">Pengantar</a></li>
      <li><a href="#">Instalasi</a></li>
      <li><a href="#">Konfigurasi</a></li>
      <li><a href="#">Penutup</a></li>
    </ul>
  </aside>
  <main class="isi">
    <h1>Panduan Konfigurasi</h1>
    <p>Artikel panjang yang membuat halaman perlu digulir...</p>
  </main>
</div>

Hasil di Browser:

text 
Pada viewport 1280x720, kolom pertama tepat 260px:
computed grid-template-columns "260px 708px". Panel sisi membawa
position: sticky dengan top: 24px, sehingga menempel 24px dari tepi
atas viewport ketika halaman digulir; kolom isi menyerap sisa ruang
(1000 - 260 - 32) menjadi 708px.

Mari kita telaah deklarasi yang menentukan:

  1. grid-template-columns: 260px 1fr: lebar sidebar dikunci 260px agar menu tidak berubah-ubah, sedangkan 1fr memberi seluruh sisa ruang kepada artikel (lihat fr-unit ).
  2. position: sticky; top: 24px: selama menggulir, panel sisi tetap berjarak 24px dari tepi atas viewport (lihat sticky-positioning ).
  3. align-self: start: deklarasi paling sering terlupakan. Item grid secara bawaan membentang (stretch) setinggi baris; panel yang sudah setinggi artikel tidak punya ruang untuk bergerak, sehingga sticky terasa “tidak berfungsi”. align-self: start membiarkan panel selebar kontennya sendiri dan menyisakan ruang vertikal untuk menempel.

Dalam demo chapter ini, artikel sengaja dibuat panjang agar halaman bergulir. Coba gulir dan amati panel Materi tetap terlihat di sepanjang perjalanan, lalu ikut naik kembali ketika ujung artikel melewati ambang — batas induk bekerja persis seperti dirancang.

Ukuran Sidebar: Tetap atau Fraksi #

Sidebar berisi navigasi lebih nyaman bila lebarnya konsisten, karena pengguna mengenali letaknya dari ingatan otot (muscle memory). Karena itu 260px — bukan 1fr — adalah pilihan yang tepat untuk kolom pertama. Gunakan 1fr di sisi sidebar justru ketika kedua kolom harus berbagi ruang secara proporsional, misalnya dua panel data yang sama pentingnya; resep itu sudah dibahas pada chapter Two-column Layout . Alternatif flexbox dengan flex-direction: row juga mampu menyusun dua kolom, tetapi grid menyatakan hubungan kedua track pada satu baris deklarasi dan menyediakan align-self per item — dua hal yang membuat penyesuaian sticky menjadi langsung.

Satu kelemahan kolom tetap perlu diantisipasi: pada layar sempit, 260px menghabiskan hampir separuh layar. Penempelan sticky juga butuh ruang untuk bergerak — panel hanya menempel selama induknya lebih tinggi dari viewport; artikel dua paragraf tidak akan membuat apa pun menempel. Bila halaman memakai header sticky dari chapter Sticky Header , geser ambang penempelannya agar sidebar tidak tertutup: header setinggi 64px plus jarak 24px berarti sidebar memakai top: 88px. Untuk menu yang daftarnya lebih panjang dari viewport, batasi tinggi panelnya sendiri dengan max-height dan overflow-y: auto agar tautan terbawah tetap terjangkau.

Menyusun Ulang di Layar Sempit #

Di bawah 800px, sidebar dipindah ke atas konten dan penempelannya dinonaktifkan — daftar tautan panjang yang menempel di atas layar justru menutupi artikel:

css 
@media (max-width: 800px) {
  .tata {
    grid-template-columns: 1fr;
  }
  .sisi {
    position: static;
    align-self: auto;
  }
}

position: static mengembalikan panel ke alur dokumen biasa sehingga halaman dapat digulir tanpa hambatan (lihat media-queries ).

Demo chapter ini memuat penanda uji otomatis yang memverifikasi lebar sidebar 260px, position: sticky, top: 24px, serialisasi grid-template-columns “260px 708px”, serta lebar kolom isi 708px.