CSS Grid vs Flexbox — Panduan Lengkap Layout CSS Modern

Pendahuluan: Memilih Sistem Layout CSS yang Tepat

CSS Grid dan Flexbox adalah dua layout tools powerful yang merevolusi cara kita membangun layout web. Meskipun keduanya penting untuk desain web modern, memahami kapan menggunakan masing-masing sangat krusial untuk menciptakan desain yang efisien, maintainable, dan responsif.

Dalam panduan komprehensif ini, Kamu akan mempelajari perbedaan fundamental antara CSS Grid dan Flexbox, kekuatan dan kelemahan mereka, use cases praktis, dan cara mengkombinasikan keduanya secara efektif.

Daftar Isi

• Flexbox: Layout Satu Dimensi
• CSS Grid: Layout Dua Dimensi
• Perbedaan Utama
• Kapan Menggunakan Flexbox
• Kapan Menggunakan CSS Grid
• Menggabungkan Grid dan Flexbox
• Contoh Praktis
• Browser Support
• Kesimpulan

Flexbox: Layout Satu Dimensi

Flexbox (Flexible Box Layout) dirancang untuk layout satu dimensi—baik row atau column. Flexbox unggul dalam mendistribusikan space dan menyelaraskan item dalam container sepanjang satu axis.

Sintaks Flexbox Dasar

.container {
  display: flex;
  flex-direction: row; /* atau column */
  justify-content: center; /* alignment horizontal */
  align-items: center; /* alignment vertikal */
  gap: 1rem;
}

.item {
  flex: 1; /* grow untuk mengisi space yang tersedia */
}

Properties Flexbox

Container Properties:

• display: flex - Mendefinisikan flex container
• flex-direction - Orientasi row atau column
• justify-content - Main axis alignment
• align-items - Cross axis alignment
• flex-wrap - Izinkan items untuk wrap
• gap - Space antara items

Item Properties:

• flex-grow - Seberapa banyak item tumbuh
• flex-shrink - Seberapa banyak item menyusut
• flex-basis - Ukuran awal sebelum growing/shrinking
• order - Urutan visual items

Use Cases Sempurna untuk Flexbox

1. Navigation Bars

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

2. Item Lists

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

3. Button Groups

.button-group {
  display: flex;
  gap: 0.5rem;
}

4. Card Content

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

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
}

CSS Grid: Layout Dua Dimensi

CSS Grid adalah sistem layout dua dimensi untuk rows dan columns secara bersamaan. Grid memberikan kontrol presisi atas kedua dimensi, membuatnya sempurna untuk layout kompleks.

Sintaks Grid Dasar

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

.item {
  grid-column: span 2; /* span across 2 columns */
}

Properties Grid

Container Properties:

• display: grid - Mendefinisikan grid container
• grid-template-columns - Column tracks
• grid-template-rows - Row tracks
• grid-template-areas - Named grid areas
• gap - Space antara tracks
• justify-items - Horizontal alignment
• align-items - Vertical alignment

Item Properties:

• grid-column - Column placement
• grid-row - Row placement
• grid-area - Named area placement

Use Cases Sempurna untuk CSS Grid

1. Page Layouts

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

2. Photo Galleries

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

3. Dashboard Layouts

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

.widget-large {
  grid-column: span 8;
}

.widget-small {
  grid-column: span 4;
}

4. Sistem Card Kompleks

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

.featured-card {
  grid-column: span 2;
  grid-row: span 2;
}

Perbedaan Utama

Fitur	Flexbox	CSS Grid
Dimensi	Satu dimensi (row ATAU column)	Dua dimensi (rows DAN columns)
Content Flow	Content-first (flex ke content)	Layout-first (content fit layout)
Terbaik Untuk	Menyelaraskan items, distribusi space	Membuat layout kompleks
Kompleksitas	Lebih simple, mudah dipelajari	Lebih powerful, learning curve lebih steep
Browser Support	Excellent (IE10+)	Excellent (IE11+ dengan prefixes)

Kapan Menggunakan Flexbox

Pilih Flexbox ketika Kamu butuh:

• ✅ Layout satu dimensi (baik rows atau columns)
• ✅ Content-based sizing (items menentukan layout)
• ✅ Alignment sederhana (center items, distribute space)
• ✅ Navigation menus dan toolbars
• ✅ Form layouts dengan labels dan inputs
• ✅ Item lists yang wrap
• ✅ Quick prototypes dan simple components

Kapan Menggunakan CSS Grid

Pilih CSS Grid ketika Kamu butuh:

• ✅ Layout dua dimensi (rows dan columns bersama)
• ✅ Positioning presisi dari elemen
• ✅ Complex page layouts (header, sidebar, content, footer)
• ✅ Overlapping content (layered elements)
• ✅ Responsive galleries dengan varying item sizes
• ✅ Dashboard interfaces dengan multiple sections
• ✅ Magazine-style layouts dengan berbagai content blocks

Menggabungkan Grid dan Flexbox

Pendekatan paling powerful adalah menggunakan keduanya bersama! Grid untuk struktur page keseluruhan, Flexbox untuk internal components.

Contoh: Modern Web Page

/* Grid untuk page layout */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Flexbox untuk header navigation */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

/* Grid untuk main content */
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  padding: 2rem;
}

/* Flexbox untuk article cards */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

Contoh Praktis

Responsive Navigation Bar

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}

Responsive Grid Gallery

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

.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  gap: 1rem;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .holy-grail {
    grid-template:
      "header" auto
      "nav" auto
      "main" 1fr
      "aside" auto
      "footer" auto
      / 1fr;
  }
}

Browser Support

Flexbox dan CSS Grid memiliki browser support excellent di 2026:

• Flexbox: Didukung di semua browser modern (IE10+)
• CSS Grid: Didukung di semua browser modern (IE11+ dengan -ms- prefix)

Untuk legacy browser support, pertimbangkan menggunakan feature queries:

/* Fallback untuk older browsers */
.container {
  display: block;
}

/* Modern browsers */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Kesimpulan

CSS Grid dan Flexbox bukan teknologi yang bersaing—mereka adalah tools komplementer yang dirancang untuk layout challenges berbeda. Gunakan Flexbox untuk layout satu dimensi dan component-level design, dan CSS Grid untuk layout page dua dimensi dan arrangements kompleks.

Panduan Keputusan Cepat:

• Perlu menyelaraskan items dalam row atau column? → Flexbox
• Perlu kontrol presisi atas rows dan columns? → CSS Grid
• Membangun full page layout? → CSS Grid
• Membangun navigation bar atau card component? → Flexbox
• Tidak yakin? → Coba Flexbox dulu (lebih simple), switch ke Grid jika diperlukan

Kuasai keduanya, dan Kamu akan dilengkapi untuk membangun layout web modern apapun secara efisien dan responsif.

Artikel Terkait:

• Teknik CSS Advanced
• Mobile-First Responsive Design
• Optimasi Performa Web

---

Terakhir diperbarui: 8 Januari 2026