Belajar CSS Flexbox dan Grid: Panduan Lengkap Layout Modern

Setelah bisa bikin halaman dengan HTML dan CSS dasar, hal berikutnya yang paling sering ditanyakan adalah: gimana caranya menyusun elemen supaya rapi dan responsif? Di sinilah Flexbox dan Grid berperan.

Dua teknik layout ini yang paling sering saya pakai untuk semua project — dari navbar sampai dashboard. Di artikel ini saya jelaskan keduanya, kapan memakainya, dan contoh yang bisa langsung kamu coba.

Apa itu CSS Flexbox?

Flexbox (Flexible Box Layout) adalah cara di CSS untuk menyusun elemen dalam satu baris atau satu kolom. Fokusnya satu dimensi: kiri-kanan atau atas-bawah, tergantung flex-direction yang kamu set.

Ciri khasnya: anak-anak dari container flex otomatis diatur rapi tanpa perlu menghitung jarak manual.

Memulai Flexbox

Kamu hanya perlu dua hal: display: flex pada parent, lalu properti di anak-anaknya.

.container {
  display: flex;
  gap: 10px; /* jarak antar elemen */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Hasilnya, tiga kotak berjajar horizontal dengan jarak 10px. Tanpa Flexbox, kamu harus pakai float atau inline-block — cara lama yang sering bikin pusing.

Properti Utama Flexbox

Menengahkan Elemen — Kasus Paling Sering

Kolom pertanyaan yang paling sering saya terima: “gimana biar elemennya di tengah?” Jawabannya kelihatan sepele tapi banyak yang lupa:

.container {
  display: flex;
  justify-content: center; /* tengah horizontal */
  align-items: center;     /* tengah vertikal */
}

Dengan dua baris ini, anak container langsung berada di tengah baik horizontal maupun vertikal. Ini trik yang dulu saya cari-cari berhari-hari.

Contoh: Navbar

.navbar {
  display: flex;
  justify-content: space-between; /* logo kiri, menu kanan */
  align-items: center;
}

<nav class="navbar">
  <div class="logo">Pemburu Kode</div>
  <ul class="menu">
    <li>Beranda</li>
    <li>Tutorial</li>
    <li>Kontak</li>
  </ul>
</nav>

Ini pola yang sama seperti saat saya menjelaskan cara memanggil JavaScript di HTML — struktur yang rapi sejak awal, lalu isi di dalamnya.

Apa itu CSS Grid?

CSS Grid adalah cara di CSS untuk menyusun elemen dalam baris dan kolom sekaligus — dua dimensi. Cocok untuk layout yang bentuknya seperti tabel atau papan: galeri, dashboard, halaman berita.

Memulai Grid

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* tiga kolom sama besar */
  gap: 10px;
}

<div class="grid">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

1fr artinya “satu fraksi dari ruang yang tersedia”. Jadi 1fr 1fr 1fr = tiga kolom sama besar, tanpa perlu hitung persen.

Properti Utama Grid

Contoh: Galeri Foto

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

<div class="galeri">
  <img src="foto1.jpg" alt="foto 1">
  <img src="foto2.jpg" alt="foto 2">
  <img src="foto3.jpg" alt="foto 3">
</div>

repeat(auto-fill, minmax(150px, 1fr)) adalah trik yang saya suka banget: kolom dibuat otomatis selebar minimal 150px, dan jumlahlah yang menyesuaikan lebar layar. Responsif tanpa satu pun media query.

Contoh: Layout Halaman

.halaman {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  gap: 10px;
}

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

<div class="halaman">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Konten</main>
  <footer class="footer">Footer</footer>
</div>

Dengan grid-template-areas, layout lebih gampang dibaca: kamu benar-benar “menggambar” di mana header, sidebar, dan main berada.

Kapan Memakai Flexbox vs Grid?

Ini pertanyaan yang paling sering muncul. Aturan yang selalu saya pegang:

• Satu dimensi (sejajar, baris/kolom saja) → Flexbox.
• Dua dimensi (baris + kolom sekaligus) → Grid.
• Kerangka halaman besar → mulai dengan Grid, lalu Flexbox untuk mengatur isi di dalam tiap area.

Contoh praktisnya:

Ingat ya: kalau ragu, mulai dari Flexbox. Baru naik ke Grid saat kamu sadar butuh baris dan kolom sekaligus. Tidak perlu memaksakan salah satu.

Tips dari Pengalaman Saya

Beberapa hal yang saya pelajari dari seringnya pakai Flexbox dan Grid:

1. Jangan takut gap — properti ini menyelesaikan masalah jarak antar elemen yang dulu harus pakai margin manual di tiap elemen.
2. minmax() itu teman — untuk grid yang responsif, repeat(auto-fill, minmax(...)) menghapus kebutuhan media query untuk banyak kasus.
3. Gunakan DevTools — klik kanan elemen → Inspect, lalu toggle display: flex/grid dan lihat layout berubah langsung. Cara tercepat memahami dua teknik ini.
4. Kombinasi itu normal — hampir semua website bagus memakai Grid di luar, Flexbox di dalam. Tidak ada yang “lebih benar”.
5. Viewport kecil dulu — rancang mobile-first, lalu naik. Flexbox dan Grid keduanya responsif kalau dikombinasi dengan flex-wrap / auto-fill.

FAQ — Pertanyaan Umum

Apa perbedaan antara CSS Flexbox dan CSS Grid?

Flexbox dirancang untuk menyusun elemen dalam satu baris atau satu kolom (satu dimensi), sedangkan Grid dirancang untuk menyusun elemen dalam baris dan kolom sekaligus (dua dimensi).

Kapan sebaiknya memakai Flexbox?

Gunakan Flexbox untuk menyusun elemen sejajar dalam satu arah: navbar, membuat tombol sejajar, layout kartu yang berjajar, dan menengahkan elemen.

Kapan sebaiknya memakai CSS Grid?

Gunakan Grid untuk layout keseluruhan halaman yang membutuhkan baris dan kolom: galeri gambar, dashboard, atau layout header-sidebar-main-footer.

Apakah Flexbox dan Grid bisa digunakan bersamaan?

Bisa. Pola yang umum: Grid untuk kerangka halaman (baris dan kolom besar), lalu Flexbox untuk mengatur isi di dalam tiap area.

Kesimpulan

Flexbox dan Grid adalah dua alat utama untuk menyusun layout di CSS. Flexbox untuk satu dimensi (navbar, tombol sejajar, menengahkan), Grid untuk dua dimensi (galeri, dashboard, layout halaman). Keduanya adalah standar modern dan bisa dipakai bersamaan.

Mulai dari contoh navbar Flexbox di atas, lalu coba bikin galeri dengan Grid. Setelah dua itu lancar, layout halaman penuh dengan grid-template-areas jadi jauh lebih masuk akal.

• Cara Membuat Tabel di HTML
• Operator Logika JavaScript
• Belajar Map Reduce di JavaScript