Flexbox vs Grid

Definisi

Flexbox adalah sistem layout CSS untuk menyusun elemen di satu dimensi: baris atau kolom.

Grid adalah sistem layout CSS untuk menyusun elemen di dua dimensi: baris dan kolom sekaligus.

Keduanya sama-sama dipakai untuk layout, tetapi masalah yang mereka selesaikan beda.

Kapan pakai yang mana

Pakai Flexbox kalau

• susunan item berjalan satu arah
• ukuran item bisa fleksibel mengikuti ruang tersedia
• kamu sedang mengatur alignment di dalam satu baris atau satu kolom
• komponen lebih mirip deretan daripada area

Contoh cocok:

• navbar horizontal
• tombol di footer card
• chip / tag list
• form row sederhana
• icon + teks di satu baris
• stack vertikal untuk daftar elemen UI

Pakai Grid kalau

• layout perlu kontrol baris dan kolom sekaligus
• area halaman perlu dibagi secara eksplisit
• kamu ingin menata struktur 2D dengan spacing yang konsisten
• elemen perlu ditempatkan pada area tertentu, bukan sekadar berderet

Contoh cocok:

• halaman dashboard
• galeri kartu
• layout artikel dengan sidebar
• form kompleks dengan beberapa kolom
• struktur halaman utama: header / sidebar / content / aside
• sistem card yang harus sejajar dalam beberapa kolom

Satu dimensi vs dua dimensi

Flexbox: satu dimensi

Flexbox bekerja pada main axis dan cross axis.

• flex-direction: row → main axis horizontal
• flex-direction: column → main axis vertikal
• elemen diatur mengikuti satu jalur utama
• alignment silang tetap ada, tetapi bukan fokus utama

Implikasinya:

• bagus untuk distribusi ruang di satu arah
• enak untuk alignment internal komponen
• kurang nyaman kalau kamu mulai memikirkan baris dan kolom sekaligus

Grid: dua dimensi

Grid bekerja pada tracks: baris dan kolom.

• kamu mendefinisikan struktur area
• item bisa ditempatkan ke sel, baris, kolom, atau area
• alignment horizontal dan vertikal dibaca sebagai satu sistem

Implikasinya:

• cocok untuk layout halaman dan section besar
• lebih jelas saat ada beberapa tingkat struktur visual
• lebih mudah menjaga konsistensi antar area

Pola layout yang cocok

Pola yang lebih natural untuk Flexbox

1. Distribusi item dalam satu baris

css

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

Pola ini cocok untuk menaruh elemen yang perlu berjarak di satu sumbu.

2. Stack vertikal

css

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Ini cocok untuk daftar konten yang urut dari atas ke bawah.

3. Konten kecil yang perlu alignment

css

.media-object {
  display: flex;
  gap: 0.75rem;
  align-items: start;
}

Pola ini umum untuk avatar + teks + aksi.

Pola yang lebih natural untuk Grid

1. Layout halaman

css

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
}

Pola ini cocok saat struktur ruang harus dibaca sebagai area.

2. Galeri kartu responsif

css

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

Pola ini cocok untuk kartu yang perlu tersusun rapi di beberapa kolom.

3. Form multi-kolom

css

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

Grid lebih enak saat label, input, dan bantuan teks perlu konsisten antar kolom.

Visual referensi

Visual berikut membantu membaca perbedaan inti:

• Excalidraw untuk melihat area layout sebagai bentuk dan ruang.
• Mermaid untuk melihat alur keputusan memilih layout.

::preview

Penjelasan pilihan

Cara paling aman memilih adalah melihat bentuk masalahnya:

• kalau yang diatur adalah urutan item pada satu jalur, pakai Flexbox
• kalau yang diatur adalah struktur area visual, pakai Grid
• kalau kamu mulai memaksa Flexbox mengatur kolom-halaman, biasanya layout jadi lebih rumit dari perlu
• kalau kamu memakai Grid hanya untuk merapikan isi satu baris, biasanya terlalu berat

Jebakan umum

1. Memakai Flexbox untuk layout halaman penuh

Flexbox tetap bisa dipakai, tetapi saat kebutuhan sudah melibatkan beberapa baris, kolom, dan area, Grid biasanya lebih jelas.

Tanda-tandanya:

• terlalu banyak nested container
• alignment mulai diakali dengan margin-left: auto
• ukuran antar kolom susah dijaga konsisten

2. Memakai Grid untuk tugas yang sebenarnya linear

Grid bisa saja dipakai, tetapi kadang terlalu kompleks.

Tanda-tandanya:

• kamu cuma ingin menaruh dua atau tiga elemen sejajar
• struktur template jadi lebih panjang daripada manfaatnya
• layout kecil malah terasa kaku

3. Salah memahami flex-wrap

flex-wrap bukan pengganti Grid.

Saat item mulai turun ke baris baru, Flexbox tetap berpikir dalam satu dimensi utama. Hasilnya bisa bagus untuk daftar mengalir, tetapi bukan berarti kamu mendapat kontrol area seperti Grid.

4. Mengira Grid otomatis membuat semuanya responsif

Grid memang kuat, tetapi responsif tetap perlu keputusan lebar minimum, fraksi, dan breakpoints atau auto-fit / minmax().

Tanpa itu, grid bisa tetap memaksa kartu terlalu sempit atau terlalu lebar.

5. Memaksakan justify-content dan align-content tanpa tahu axis

Di Flexbox, efek alignment sangat bergantung pada arah flex.

• justify-content mengikuti main axis
• align-items mengikuti cross axis

Kalau axis-nya salah dibaca, hasilnya terasa “nggak nurut”, padahal masalahnya cuma orientasi.

6. Lupa bahwa Grid dan Flexbox sering dipakai bersama

Ini yang paling praktis: jangan pilih salah satu untuk semua hal.

Pola umum yang sehat:

• Grid untuk struktur halaman atau section besar
• Flexbox untuk komponen di dalam area itu

Catatan implementasi

• Gunakan Flexbox untuk distribusi satu dimensi dan alignment komponen.
• Gunakan Grid untuk struktur dua dimensi dan layout halaman.
• Jangan biarkan kebutuhan layout kecil memaksa struktur HTML jadi berlapis-lapis.
• Kalau kamu ingin membaca layout dengan cepat, tanyakan: “Saya sedang mengatur deretan, atau membagi area?”
• Kalau jawabannya deretan, pilih Flexbox.
• Kalau jawabannya membagi area, pilih Grid.
• Kalau satu komponen butuh keduanya, kombinasikan: Grid di luar, Flexbox di dalam.

Istilah

• Main axis: arah utama di Flexbox.
• Cross axis: arah tegak lurus terhadap main axis di Flexbox.
• Track: baris atau kolom pada Grid.
• Area: kumpulan sel yang ditentukan dalam Grid.
• Auto-fit / minmax(): pola umum Grid untuk responsif.
• Alignment internal: penataan isi dalam satu komponen, biasanya cocok untuk Flexbox.
• Layout struktur: pembagian ruang halaman, biasanya cocok untuk Grid.

Referensi terkait

• Box Model: cara browser menghitung ruang elemen dan ruang antar elemen.
• Specificity dan Cascade: saat layout butuh override style yang lebih rapi.