Flexbox vs Grid: Kapan Memakai Masing-Masing?

Flexbox dan Grid sama-sama bisa menyusun elemen, tetapi cara berpikirnya berbeda. Flexbox mengatur item di satu arah utama: baris atau kolom. Grid mengatur hubungan baris dan kolom sekaligus. Keduanya sering dipakai bersama pada halaman yang sama.

Flexbox untuk satu alur

Navigasi adalah contoh yang cocok: logo di kiri, tautan di kanan, dan jarak antartautan konsisten.

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav__links {
  display: flex;
  gap: 1rem;
  margin-left: auto;
}

Dengan margin-left: auto, kelompok tautan terdorong ke ujung tanpa perlu menentukan lebar logo. Jika ruang menyempit, kamu bisa membungkus item dengan flex-wrap: wrap atau mengganti susunannya lewat media query.

Grid untuk susunan dua dimensi

Daftar kartu biasanya membutuhkan kolom yang sejajar dan dapat menyesuaikan lebar layar. Grid mengerjakannya dengan singkat:

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

auto-fit menambah atau mengurangi jumlah kolom sesuai ruang yang tersedia. minmax menjaga kartu tidak terlalu sempit, sedangkan 1fr membagi sisa ruang secara rata. min(100%, 16rem) membantu menghindari luapan di layar kecil.

Grid juga tepat untuk halaman dengan area yang jelas:

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 2rem;
}

@media (max-width: 48rem) {
  .article-layout { grid-template-columns: 1fr; }
}

Di desktop, artikel dan sidebar berdampingan. Di layar kecil, keduanya menjadi satu kolom.

Kombinasikan tanpa ragu

Gunakan Grid untuk kerangka halaman, lalu Flexbox di dalam header kartu atau baris tombol. Tidak ada aturan bahwa satu halaman harus memilih salah satu. Yang penting adalah hubungan antaritem: satu alur atau baris dan kolom yang saling terkait.

Saat hasilnya berantakan, aktifkan overlay Flexbox atau Grid di DevTools. Lihat dulu ukuran kontainer, gap, dan batas minimum elemen sebelum menambah banyak aturan khusus.

Ingin mencoba contoh langsung? Materi layout di kursus CSS memberi tempat untuk bereksperimen dengan keduanya.