CSS Grid vs Flexbox: Kapan Pakai Yang Mana?

Pernah nggak sih, kamu lagi bikin layout halaman web, terus tiba-tiba nongol pertanyaan di kepala: “Ini pakai Grid apa Flexbox ya?”

Kalau jawabannya iya, selamat—kamu nggak sendirian. Pertanyaan itu hampir pasti pernah terlintas di benak setiap frontend developer, dari yang masih pemula sampai yang udah bertahun-tahun ngoding. Dan jujur aja, dulu aku juga sempat bingung banget. Ada masa di mana aku pakai Flexbox buat semuanya—dari navbar sampai layout halaman utama—padahal sebenarnya ada tool yang lebih cocok. Begitu kenal CSS Grid secara mendalam, rasanya kayak nemu cheat code yang selama ini tersembunyi.

Tapi tunggu, ini bukan soal mana yang lebih bagus. Sama sekali bukan. Grid dan Flexbox itu dua tool yang punya kekuatan masing-masing. Pertanyaan yang sebenarnya bukan “mana yang lebih baik?” melainkan “kapan aku harus pakai yang mana?”

Di artikel ini, aku mau berbagi pengalaman dan pemahaman tentang dua layout system paling powerful di CSS ini. Kita akan bahas dari konsep dasarnya, kapan masing-masing paling cocok dipakai, sampai contoh kode yang bisa langsung kamu contek. Siap? Yuk, mulai.

Apa Sih Sebenarnya Flexbox dan Grid Itu?

Sebelum masuk ke perbandingan, penting banget buat kita sepemahaman dulu soal apa sebenarnya kedua tool ini.

Flexbox (atau Flexible Box Layout) itu adalah sistem layout satu dimensi. Satu dimensi di sini maksudnya adalah Flexbox bekerja dalam satu arah saja—baik itu horizontal (baris) maupun vertikal (kolom). Ketika kamu pakai display: flex, kamu membuat sebuah flex container, dan semua elemen di dalamnya jadi flex items yang bisa diatur posisi, ukuran, dan distribusinya sepanjang satu sumbu.

CSS Grid, di sisi lain, adalah sistem layout dua dimensi. Artinya, Grid bisa mengatur elemen sepanjang dua sumbu sekaligus—baris DAN kolom. Kamu bisa mendefinisikan struktur grid secara eksplisit, menentukan berapa kolom dan baris yang kamu mau, lalu menempatkan elemen-elemen ke dalam sel-sel grid tersebut.

Kalau aku boleh pakai analogi sederhana: Flexbox itu kayak kamu menyusun buku di rak—satu per satu, berjejer sepanjang rak. Grid itu kayak kamu menyusun catur di papan—ada baris, ada kolom, dan setiap bidak punya posisi spesifik.

Contoh Flexbox paling simpel:

/* Flexbox: Mengatur item dalam satu baris */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.item {
  flex: 1;
}

Contoh Grid paling simpel:

/* Grid: Mendefinisikan struktur kolom dan baris */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.item {
  /* Item otomatis masuk ke sel grid */
}

Dari dua contoh di atas, kelihatan kan bedanya? Flexbox fokus ke bagaimana item-item didistribusikan dalam satu garis, sementara Grid fukus ke bagaimana keseluruhan struktur halaman dibentuk.

Kapan Sebaiknya Pakai Flexbox?

Flexbox itu raja dalam menyelesaikan masalah-masalah layout yang sifatnya linear atau satu dimensi. Setelah bertahun-tahun bikin berbagai macam UI, berikut ini adalah skenario-skenario di mana Flexbox benar-benar jadi pilihan terbaik menurutku:

Ini mungkin use case paling klasik buat Flexbox. Navbar biasanya berisi logo di satu sisi dan menu di sisi lain. Dengan Flexbox, kamu bisa bikin ini dalam hitungan detik.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__menu {
  display: flex;
  gap: 24px;
  list-style: none;
}

Bersih, simpel, dan langsung jadi. Nggak perlu overthinking.

2. Card Layout yang Sederhana

Kalau kamu punya beberapa card yang ingin disejajarkan dalam satu baris dan ukurannya fleksibel, Flexbox adalah sahabatmu.

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 300px; /* Tumbuh, menyusut, basis 300px */
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Perhatikan penggunaan flex-wrap: wrap. Ini penting banget buat responsivitas—card akan otomatis turun ke baris berikutnya kalau nggak muat.

3. Centering Sesuatu (Secara Vertikal dan Horizontal)

Dulu, centering elemen di CSS itu menyebalkan. Berbagai hack bermunculan, dari margin: auto sampai position: absolute plus transform: translate(-50%, -50%). Sekarang? Tiga baris Flexbox, beres.

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

Sampai sekarang, setiap kali aku perlu nge-center sesuatu, Flexbox adalah jawaban pertama yang terlintas.

4. Form Layout

Form dengan label di kiri dan input di kanan? Flexbox lagi.

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.form-row label {
  flex: 0 0 120px;
  margin-right: 12px;
}

.form-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

5. Spacing dan Distribusi Komponen Kecil

Kapan pun kamu punya beberapa elemen yang perlu disejajarkan dengan spacing yang rapi—tombol di toolbar, ikon di sidebar, tag di bawah postingan—Flexbox selalu jadi pilihan yang solid.

Intinya: kalau masalahmu bisa diselesaikan dengan memikirkan satu arah saja (baris ATAU kolom), Flexbox hampir pasti jawabannya.

Kapan Sebaiknya Pakai CSS Grid?

CSS Grid mulai bersinar ketika layout yang kamu butuhkan melibatkan dua dimensi—alias baris DAN kolom secara bersamaan. Ini dia skenario-skenario di mana Grid benar-benar menunjukkan taringnya:

1. Layout Halaman Utama (Page Layout)

Ini use case terkuat Grid menurutku. Mau bikin layout dengan header, sidebar, konten utama, dan footer? Grid bikin ini jadi sangat intuitif.

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

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

Lihat grid-template-areas? Kamu bisa “menggambar” layout halamanmu langsung di CSS. Ini bikin kode jadi sangat mudah dibaca dan dipelihara. Cobain bikin layout kayak gini pakai Flexbox—pasti jauh lebih ribet.

2. Dashboard Layout

Dashboard biasanya punya widget-widget dengan ukuran berbeda-beda yang disusun dalam grid. Beberapa widget mungkin mengambil dua kolom, yang lain satu kolom, ada yang mengambil dua baris, dan seterusnya. Grid dibuat untuk ini.

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.widget-small  { grid-column: span 1; }
.widget-medium { grid-column: span 2; }
.widget-wide   { grid-column: span 4; }
.widget-tall   { grid-row: span 2; }

Dengan Grid, kamu bisa menentukan ukuran kolom dan baris secara eksplisit, lalu membiarkan widget-widget menempati ruang sesuai kebutuhan. Clean dan terstruktur.

3. Image Gallery / Portfolio Grid

Mau bikin galeri foto yang responsif di mana setiap gambar punya ukuran seragam? Atau mungkin ada beberapa gambar yang lebih besar dari yang lain? Grid solusinya.

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

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

Trik repeat(auto-fill, minmax(250px, 1fr)) di atas adalah salah satu fitur Grid yang paling powerful. Tanpa media query, grid otomatis menyesuaikan jumlah kolom berdasarkan lebar viewport. Ini sesuatu yang Flexbox nggak bisa lakukan secara native.

4. Complex Card Layout dengan Hierarki

Bayangkan layout kartu berita di halaman depan situs berita besar—ada kartu utama yang besar di atas, diikuti beberapa kartu kecil di bawahnya, lalu mungkin ada sidebar berisi kartu-kartu berbeda. Struktur dua dimensi macam ini lebih natural ditangani dengan Grid.

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

.news-hero    { grid-column: 1 / 2; grid-row: 1 / 2; }
.news-sidebar { grid-column: 2 / 3; grid-row: 1 / 4; }
.news-card    { /* Mengisi slot otomatis */ }

5. Form yang Kompleks

Bukan form simpel yang tadi kita bahas pakai Flexbox, tapi form yang lebih kompleks—seperti form dengan input yang melebar beberapa kolom, textarea yang mengambil full width, atau grid form layout yang lebih terstruktur.

.complex-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.complex-form .full-width {
  grid-column: 1 / -1; /* Melebar dari kolom pertama sampai terakhir */
}

Intinya: kalau layoutmu membutuhkan koordinasi di dua dimensi—baris DAN kolom secara bersamaan—Grid adalah tool yang tepat.

Grid dan Flexbox Bukan Musuh, Mereka Tim

Ini mungkin bagian terpenting dari artikel ini. Aku dulu sempat terjebak dalam pola pikir “harus pilih salah satu.” Padahal kenyataannya, Grid dan Flexbox bekerja paling baik kalau digunakan BERSAMAAN.

Sebuah layout halaman utama mungkin pakai Grid buat struktur besarnya—header, sidebar, konten, footer. Tapi di dalam header itu sendiri, kamu pakai Flexbox buat mengatur logo dan menu. Di dalam card konten, kamu pakai Flexbox buat mengatur ikon dan teks di dalam card. Di dalam sidebar, kamu pakai Flexbox lagi buat mengatur navigasi.

Contoh konkret:

/* Grid untuk struktur halaman */
.page {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr auto;
  grid-template-areas:
    "header header"
    "aside  main"
    "aside  footer";
  min-height: 100vh;
}

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

/* Flexbox untuk isi header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* Flexbox untuk navigasi sidebar */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}

/* Grid untuk konten utama (card layout) */
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Flexbox untuk isi card */
.card {
  display: flex;
  flex-direction: column;
}

.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* Push ke bawah */
}

Perhatikan bagaimana Grid dan Flexbox saling melengkapi di sini. Grid menangani makro layout, Flexbox menangani mikro layout. Keduanya punya peran masing-masing, dan ketika digunakan bersama, hasilnya jauh lebih powerful daripada pakai salah satu saja.

Panduan Cepat: Keputusan dalam 30 Detik

Supaya kamu nggak perlu overthinking setiap kali mau pilih layout system, berikut ini cheat sheet sederhana yang biasa aku pakai:

Pakai Flexbox kalau:

Layoutmu cuma dalam satu dimensi (baris ATAU kolom)
Kamu butuh mendistribusikan ruang antar elemen secara fleksibel
Kamu mau nge-center sesuatu
Isi layoutmu dinamis dan ukurannya ditentukan oleh kontennya
Kamu bikin komponen kecil (button group, nav item, form row)

Pakai Grid kalau:

Layoutmu membutuhkan koordinasi baris DAN kolom
Kamu mau mendefinisikan struktur layout secara eksplisit di CSS
Kamu bikin page-level layout (header, sidebar, content, footer)
Kamu butuh elemen menempati posisi spesifik di grid
Kamu mau bikin layout responsif tanpa banyak media query

Pakai keduanya kalau:

Kamu punya layout halaman yang kompleks
Di dalam setiap section besar, ada komponen-komponen kecil yang butuh alignment
Kamu mau kode yang maintainable dan mudah dipahami

Satu hal yang sering aku tekankan ke teman-teman yang baru belajar: nggak ada aturan yang dilanggar kalau kamu pakai Flexbox buat layout besar atau Grid buat komponen kecil. Keduanya bisa dipakai buat apa saja. Yang aku share di sini hanyalah panduan—bukan dogma. Pada akhirnya, pakai yang paling masuk akal buat kasusmu.

Satu Tips Terakhir yang Jarang Dibahas

Ada satu hal yang sering luput dari perbincangan soal Grid vs Flexbox: kemudahan maintenance.

Ketika kamu bekerja di proyek yang besar, atau bekerja dalam tim, kemudahan membaca dan memelihara kode itu jauh lebih berharga daripada sekadar “bisa jalan.” Grid, dengan grid-template-areas-nya, bikin layout halaman jadi sangat mudah dipahami hanya dengan melihat CSS-nya saja. Seseorang yang baru pertama kali lihat kode Grid kamu bisa langsung paham struktur halamannya.

Flexbox, di sisi lain, bikin komponen-komponen kecil jadi sangat modular dan bisa dipindah-pindah tanpa mengganggu layout keseluruhan.

Kombinasi keduanya, kalau dipakai dengan bijak, menghasilkan codebase yang bersih, terstruktur, dan gampang di-maintain. Dan itu, menurutku, jauh lebih penting daripada sekadar “bisa jalan.”

Punya Proyek yang Butuh Layout Responsif dan Rapi?

Kalau kamu lagi bikin proyek web dan butuh bantuan soal layout, responsivitas, atau apapun terkait frontend development, jangan ragu buat reach out. Kadang diskusi singkat bisa menghemat berjam-jam debugging.

Hubungi aku di: [email protected]

FAQ: Pertanyaan yang Sering Muncul Soal Grid vs Flexbox

Apakah CSS Grid bisa menggantikan Flexbox sepenuhnya?

Secara teknis, Grid bisa menangani hampir semua kasus yang biasa diselesaikan Flexbox. Tapi itu bukan berarti Grid selalu lebih baik. Untuk kasus-kasus satu dimensi yang sederhana—seperti centering, button group, atau navbar—Flexbox tetap lebih simpel dan langsung to the point. Grid punya overhead “pemikiran” yang lebih besar untuk kasus-kasus sederhana tersebut. Jadi bukan soal menggantikan, tapi melengkapi.

Bagaimana dengan browser support? Apakah Grid dan Flexbox aman dipakai sekarang?

Di tahun 2026, browser support untuk kedua fitur ini sudah sangat mature. CSS Grid didukung di semua browser modern (Chrome, Firefox, Safari, Edge) dan sudah didukung sejak 2017-an. Flexbox bahkan lebih lama lagi. Kecuali kamu masih harus support browser yang sangat tua (yang sangat tidak disarankan), kamu bisa pakai keduanya dengan percaya diri. Kalau mau cek support terbaru, kunjungi caniuse.com.

Apakah Flexbox dan Grid bikin website jadi lambat?

Tidak. Kedua sistem layout ini ditangani langsung oleh browser rendering engine. Dibandingkan dengan teknik-teknik layout lama (float, inline-block, table layout), Flexbox dan Grid justru lebih efisien karena browser bisa mengoptimalkan layout calculation-nya. Performa bukanlah alasan untuk menghindari keduanya—justru sebaliknya.

Bisa nggak Grid dan Flexbox dipakai barengan di satu elemen yang sama?

Bisa, tapi ini bukan praktik yang umum atau direkomendasikan. Satu elemen hanya bisa jadi Flex Container ATAU Grid Container—nggak bisa keduanya sekaligus. display: flex dan display: grid sifatnya mutual exclusive. Kalau kamu merasa butuh keduanya di satu elemen, kemungkinan besar ada cara yang lebih baik dengan memisahkannya ke parent dan child.

Mana yang lebih mudah dipelajari untuk pemula?

Menurut pengalaman aku, Flexbox lebih mudah dipelajari duluan karena konsepnya lebih simpel—satu dimensi, beberapa property utama, dan langsung bisa dipakai buat kasus sehari-hari. Setelah kamu nyaman dengan Flexbox, barulah belajar Grid yang konsepnya lebih dalam tapi juga lebih powerful. Banyak konsep di Flexbox (seperti gap, align-items, justify-content) yang juga dipakai di Grid, jadi investasi belajar Flexbox nggak akan sia-sia.