Tutorial Coding

Cara Membuat Layout Dua Kolom dengan CSS Grid dan Flexbox

Redaksi
Tampilan layout dua kolom pada browser dengan kode CSS di editor

Membuat layout dua kolom dengan CSS Grid dan Flexbox bisa dilakukan tanpa framework. Grid cocok saat kamu butuh kolom dengan lebar tetap dan area konten yang terdefinisi, sedangkan Flexbox lebih luwes untuk susunan satu baris. Tutorial ini menunjukkan kedua pendekatan, mulai dari struktur HTML hingga penyesuaian responsif.

Struktur HTML untuk layout dua kolom

Mulai dengan wadah utama yang membungkus dua area: konten dan sidebar. Gunakan elemen semantik agar mudah dibaca dan diatur.

<div class="layout">
  <main class="konten">
    <h2>Judul Artikel</h2>
    <p>Isi konten utama di sini.</p>
  </main>
  <aside class="sidebar">
    <p>Widget atau tautan tambahan.</p>
  </aside>
</div>

Dengan struktur ini, kamu bisa menerapkan grid atau flex pada elemen .layout. Pastikan tidak ada elemen lain di luar dua anak tersebut agar perhitungan kolom tetap sederhana.

Membuat layout dua kolom dengan CSS Grid

Grid memberikan kontrol penuh atas lebar kolom. Kamu bisa menentukan kolom konten yang fleksibel dan sidebar dengan lebar tetap.

Langkah 1: Aktifkan grid pada wadah

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

Properti grid-template-columns: 1fr 300px membuat kolom pertama mengisi sisa ruang dan kolom kedua selebar 300px. gap memberi jarak antar kolom tanpa perlu margin tambahan.

Langkah 2: Atur area konten dan sidebar

Dengan grid, kamu tidak perlu menetapkan lebar pada anak elemen. Cukup pastikan tidak ada properti yang mengganggu seperti width: 100% pada .konten atau .sidebar.

Langkah 3: Responsif dengan media query

Pada layar sempit, ubah menjadi satu kolom dengan menumpuk konten dan sidebar.

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

Grid memudahkan perubahan tata letak karena hanya perlu mengubah definisi kolom.

Membuat layout dua kolom dengan Flexbox

Flexbox lebih sederhana untuk satu baris. Kamu dapat mengandalkan flex pada anak elemen untuk mengatur pembagian ruang.

Langkah 1: Jadikan wadah sebagai flex container

.layout {
  display: flex;
  gap: 2rem;
}

Langkah 2: Atur pertumbuhan konten dan lebar sidebar

.konten {
  flex: 1;
}
.sidebar {
  flex: 0 0 300px;
}

flex: 1 membuat konten mengisi ruang tersisa, sedangkan flex: 0 0 300px menetapkan sidebar agar tidak menyusut dan lebarnya tetap 300px.

Langkah 3: Responsif dengan flex-wrap

Untuk layar kecil, izinkan item untuk membungkus ke baris baru.

@media (max-width: 768px) {
  .layout {
    flex-wrap: wrap;
  }
  .sidebar {
    flex: 1 1 100%;
  }
}

Dengan flex-wrap: wrap, sidebar akan turun ke bawah konten ketika ruang tidak cukup. Pastikan juga .konten memiliki flex: 1 1 100% pada media query yang sama agar keduanya menumpuk.

Kapan memakai Grid dan kapan memakai Flexbox

Grid lebih tepat ketika kamu ingin mengontrol kolom secara eksplisit, misalnya konten dengan lebar tetap dan sidebar yang juga tetap. Flexbox lebih cocok jika salah satu kolom perlu mengisi ruang secara dinamis dan kamu tidak ingin repot menghitung lebar. Untuk perbandingan lebih rinci, baca CSS Grid vs Flexbox: Perbandingan untuk Layout Dua Dimensi.

Jika layout dua kolommu hanya terdiri dari satu baris, Flexbox sudah cukup. Ketika nanti kamu menambahkan area lain seperti header dan footer yang juga perlu disejajarkan, Grid bisa lebih mudah diatur.

Tips tambahan untuk layout dua kolom yang rapi

  • Gunakan box-sizing: border-box agar padding tidak menambah lebar elemen.
  • Terapkan min-width: 0 pada kolom konten jika ada teks panjang atau elemen yang bisa meluber.
  • Manfaatkan CSS Reset atau Normalize untuk menghilangkan margin default yang mengganggu. Panduan memilihnya ada di CSS Reset vs Normalize.css vs Reboot.
  • Uji di berbagai ukuran layar, terutama di antara 768px dan 1024px, untuk memastikan tidak ada kolom yang terlalu sempit.

Jika sidebar perlu tetap terlihat saat halaman digulir, terapkan position sticky. Caranya dijelaskan di Cara Membuat Sidebar Sticky dengan CSS position: sticky.

Menguji performa dan koneksi saat pengembangan

Saat mengembangkan layout, kamu mungkin mengakses server lokal atau hosting. Mengukur kualitas koneksi bisa membantu mendeteksi masalah lambat. Pelajari cara membaca hasil ping untuk memahami latensi dan packet loss di panduan membaca hasil ping: arti TTL, latensi, dan packet loss.

Keamanan data pribadi juga penting, terlebih jika layout yang kamu buat melibatkan formulir atau data pengguna. Simak langkah memeriksa kebocoran data di cara memeriksa kebocoran data pribadi dan menanganinya.

Untuk hiburan saat istirahat coding, kamu bisa menonton pertandingan basket, sepak bola, atau UFC secara gratis dengan host yang menghibur di tarkamlive. Situs ini menyediakan siaran langsung yang bisa menemani waktu luangmu.

Ringkasan

Layout dua kolom dapat dibuat dengan Grid atau Flexbox. Grid memberi kontrol lebih besar atas lebar kolom, sedangkan Flexbox lebih sederhana untuk satu baris. Keduanya mudah dibuat responsif dengan media query. Pilih sesuai kebutuhan dan pastikan struktur HTML mendukung.

Pertanyaan yang Sering Diajukan

Apakah bisa menggunakan Grid dan Flexbox sekaligus?

Bisa. Contohnya, gunakan Grid untuk tata letak halaman utama, lalu Flexbox untuk menyusun item di dalam sidebar atau navigasi. Keduanya tidak saling bertentangan karena bekerja pada tingkat elemen yang berbeda.

Bagaimana cara membuat kolom sidebar tetap di kanan?

Pada Grid, tentukan urutan kolom di grid-template-columns dengan konten lebih dulu. Pada Flexbox, pastikan konten memiliki order lebih kecil atau letakkan sidebar setelah konten di HTML. Secara default, urutan mengikuti struktur HTML.

Apa yang harus dilakukan jika konten meluber ke sidebar?

Periksa apakah ada elemen dengan lebar tetap atau white-space: nowrap yang menyebabkan overflow. Tambahkan min-width: 0 pada kolom konten dan pastikan gambar atau tabel memiliki max-width: 100%.

Redaksi

Related Posts