Two-column Layout

Banyak halaman hanya butuh dua area berdampingan: artikel dengan daftar isi, form dengan ringkasan pesanan, atau konten utama dengan kotak informasi samping. Untuk kebutuhan itu, grid dengan dua track berproporsi fr adalah resep paling ringkas — kita tidak perlu menghitung piksel, cukup menyatakan perbandingannya. Pada chapter ini kita membangun versi yang bekerja di layar lebar, lalu menambahkan satu media query agar kolom menumpuk kembali menjadi satu di layar sempit.

Resep Grid Dua Kolom #

Resep berikut memakai wadah terpusat dari chapter sebelumnya dan menambahkan dua track berproporsi 1:2 dengan jarak 24px:

.tata {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

Struktur HTML-nya hanya dua anak langsung di dalam wadah:

<div class="tata">
  <aside class="daftar-isi">
    <h2>Daftar Isi</h2>
    <ul>
      <li><a href="#">Pendahuluan</a></li>
      <li><a href="#">Instalasi</a></li>
      <li><a href="#">Konfigurasi</a></li>
    </ul>
  </aside>
  <main class="artikel">
    <h1>Konfigurasi Proyek</h1>
    <p>Konten utama berada di kolom kanan yang dua kali lebih lebar.</p>
  </main>
</div>

Hasil di Browser:

Pada viewport 1280x720, wadah 900px terbagi menjadi dua track:
computed grid-template-columns "292px 584px". Kolom pertama (aside)
selebar 292px, kolom kedua (artikel) selebar 584px.

Mari kita telaah cara angka-angka itu terbentuk:

1. grid-template-columns: 1fr 2fr: total fraksi adalah 3, sehingga ruang yang tersedia dibagi menjadi tiga bagian sama — kolom pertama mendapat satu bagian, kolom kedua dua bagian (lihat fr-unit ).
2. gap: 24px: jarak antar kolom dipotong lebih dulu dari ruang yang tersedia. Perhitungannya: 900 − 24 = 876px, lalu 876 ÷ 3 = 292px untuk tiap fraksi.
3. max-width: 900px + margin-inline: auto: wadah terpusat seperti pada chapter Centered Container , sehingga resep ini dapat ditempel di halaman mana pun.

Collapse ke Satu Kolom di Layar Sempit #

Dua kolom yang berdampingan tidak muat di ponsel. Satu media query cukup mengubahnya kembali menjadi susunan vertikal, dan kedua anak otomatis menumpuk mengikuti urutan HTML:

@media (max-width: 640px) {
  .tata {
    grid-template-columns: 1fr;
  }
}

Deklarasi di atas mengganti dua track menjadi satu track, sehingga aside dan artikel menjadi dua baris bertumpuk dengan lebar penuh. Aturan grid lainnya — gap, max-width, margin-inline: auto — tetap berlaku tanpa perlu ditulis ulang. Pendekatan ini disebut graceful degradation karena kita merancang versi lengkap lebih dulu; pendekatan sebaliknya (menulis satu kolom dulu, lalu @media (min-width: 640px) menambah kolom) disebut mobile-first — keduanya sah, yang penting konsisten (lihat mobile-first ).

Perbandingan beberapa proporsi yang lazim dipakai:

Kuncinya: nyatakan hubungan antar kolom sebagai perbandingan (fr), bukan piksel, sehingga perubahan lebar layar tetap menjaga proporsi yang dimaksud.

Perlu diperhatikan bahwa gap menggantikan praktik lama memberi margin pada tiap kolom lalu menghapus margin sisi terluar. Dengan gap, jarak hanya muncul di antara track dan tidak pernah menambah lebar di tepi wadah — hal inilah yang membuat perhitungan 900 − 24 di atas tetap sederhana (lihat alignment-dan-gap ). Bila urutan visual perlu dibalik tanpa menyentuh HTML, properti order dapat memindahkan item secara visual; gunakan dengan hati-hati, karena urutan tampil yang berbeda dari urutan navigasi keyboard membingungkan pengguna yang bergerak dengan tombol Tab.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi display: grid, serialisasi grid-template-columns “292px 584px”, serta lebar masing-masing kolom (292px dan 584px) pada viewport 1280x720.