CSS Flexbox vs Grid: Kapan Pakai Yang Mana?

Flexbox dan CSS Grid sama-sama sistem layout CSS modern. Tapi kapan pakai yang mana? Jawaban singkatnya: Flexbox untuk satu dimensi, Grid untuk dua dimensi. Mari kita bedah lebih dalam.

Perbedaan Fundamental

Kapan Pakai Flexbox?

Flexbox ideal untuk:

1. Navbar

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Logo di kiri, menu di kanan — satu baris, satu dimensi. Flexbox sempurna.

2. Centering

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Centering vertikal dan horizontal — yang dulu sangat sulit — jadi 3 baris CSS.

3. Distribusi Space

.card-row {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1;  /* semua card ukuran sama */
}

4. Item yang Ukurannya Bervariasi

Flexbox membiarkan item menentukan ukurannya sendiri, lalu mendistribusikan sisa space. Cocok untuk toolbar, tag list, atau breadcrumb.

Coba Flexbox

Ubah properti di bawah dan lihat hasilnya:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

Kapan Pakai CSS Grid?

Grid ideal untuk:

1. Layout Halaman

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

Dua dimensi — kolom sidebar + konten, baris header + main + footer. Grid unggul di sini.

2. Gallery / Card Grid

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

auto-fill + minmax = grid yang otomatis responsif tanpa media query!

3. Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

Item bisa span multiple kolom dan baris — sesuatu yang sulit dilakukan dengan Flexbox.

Coba CSS Grid

Eksperimen dengan properti Grid di bawah:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

Perbandingan Langsung

Contoh: Card Layout Responsif

Dengan Flexbox:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;  /* grow, shrink, basis */
}

Masalah: baris terakhir yang tidak penuh akan stretch — card terakhir bisa jadi terlalu lebar.

Dengan Grid:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

Grid menjaga ukuran kolom konsisten, bahkan di baris terakhir.

Contoh: Header dengan Logo + Menu + CTA

Dengan Flexbox (lebih cocok):

header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-links { margin-left: auto; }
.cta { margin-left: 1rem; }

Dengan Grid:

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

Keduanya bisa, tapi Flexbox lebih natural untuk kasus ini karena itemnya bervariasi ukuran dan cuma satu baris.

Menggabungkan Keduanya

Dalam praktik, kamu hampir selalu menggabungkan Flexbox dan Grid:

/* Grid untuk layout utama */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}

/* Flexbox untuk navbar di dalam grid */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid untuk card section */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Flexbox untuk konten di dalam card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Cheat Sheet

Gunakan Flexbox saat:

• Layout satu baris atau satu kolom
• Centering konten
• Distribusi space antar item
• Item dengan ukuran yang bervariasi
• Komponen kecil (navbar, toolbar, form row)

Gunakan Grid saat:

• Layout dua dimensi (baris DAN kolom)
• Layout halaman utama
• Gallery atau card grid
• Item perlu span multiple kolom/baris
• Kamu ingin kontrol presisi atas placement

Kesimpulan

Flexbox dan Grid bukan kompetitor — mereka partner. Memahami kapan pakai yang mana (dan kapan menggabungkan keduanya) adalah skill layout CSS yang paling penting di 2026.

Aturan simpel: kalau kamu berpikir dalam baris atau kolom, mulai dengan Flexbox. Kalau kamu berpikir dalam grid/tabel, mulai dengan CSS Grid.