Layout satu kolom itu gampang. Masalah mulai muncul begitu kamu ingin dua kartu sejajar, sidebar yang menempel di kiri, atau navbar yang melebar penuh di desktop lalu menyusun ulang dirinya di layar ponsel. Banyak orang menambal situasi ini dengan margin dan float, lalu menyerah ketika elemen melompat-lompat di ukuran layar tertentu. CSS Grid dan Flexbox ada untuk menutup kekacauan itu. Keduanya sistem layout bawaan browser, tanpa perlu framework, dan dukungannya sudah stabil sejak lama.

Flexbox untuk Satu Dimensi

Flexbox mengatur elemen dalam satu arah: baris atau kolom. Kamu tidak perlu menghitung lebar manual atau berurusan dengan float. Cukup set display: flex pada container, lalu anak-anaknya akan tersusun sejajar. Properti yang paling sering saya pakai: gap untuk jarak antar item, flex-wrap agar item turun ke baris baru saat kehabisan ruang, dan flex untuk mengontrol pembagian ukuran.

html
<div class="baris">
  <div class="kartu">Kartu 1</div>
  <div class="kartu">Kartu 2</div>
  <div class="kartu">Kartu 3</div>
  <div class="kartu">Kartu 4</div>
</div>
css
.baris {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.kartu {
  flex: 1 1 250px; /* grow shrink basis */
  padding: 24px;
  background: #f4f4f5;
  border-radius: 8px;
}

Perhatikan flex: 1 1 250px. Angka terakhir adalah basis 250px: setiap kartu minimal 250px. Ketika baris tidak muat lagi, kartu berikutnya turun ke bawah berkat flex-wrap: wrap, dan flex-grow: 1 membuat kartu memenuhi sisa ruang. Hasilnya deretan kartu yang otomatis menyesuaikan lebar layar, tanpa satu pun media query.

CSS Grid untuk Dua Dimensi

Kalau Flexbox mengurus satu arah, Grid mengurus baris dan kolom sekaligus. Ini yang kamu butuhkan untuk galeri foto, dashboard, atau struktur halaman. Kuncinya ada di grid-template-columns. Fungsi repeat() plus minmax() dan auto-fill memungkinkan kolom yang menyesuaikan diri tanpa menulis satu pun breakpoint.

html
<div class="galeri">
  <div class="foto">1</div>
  <div class="foto">2</div>
  <div class="foto">3</div>
  <div class="foto">4</div>
  <div class="foto">5</div>
  <div class="foto">6</div>
</div>
css
.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.foto {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #e4e4e7;
  border-radius: 8px;
}

minmax(200px, 1fr) artinya tiap kolom tidak boleh lebih sempit dari 200px, tapi boleh membesar sampai rata dengan kolom lain. Di layar lebar kamu dapat enam kolom, di layar sempit otomatis jadi dua atau satu. Tidak ada media query yang ditulis tangan, dan galeri tetap rapi.

Layout Halaman Nyata: Gabungkan Keduanya

Di proyek nyata, keduanya jarang dipakai sendirian. Saya biasanya memakai Grid untuk kerangka halaman (header, sidebar, konten, footer) lalu Flexbox untuk mengatur isi di dalam masing-masing area. Berikut kerangka halaman dengan grid-template-areas, yang menurut saya jauh lebih mudah dibaca daripada menulis koordinat baris dan kolom secara manual.

html
<body class="tata-letak">
  <header class="header">Logo &amp; Nav</header>
  <aside class="sidebar">Menu</aside>
  <main class="konten">Isi artikel</main>
  <footer class="footer">Hak cipta</footer>
</body>
css
.tata-letak {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar konten"
    "footer  footer";
  min-height: 100vh;
}

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

@media (max-width: 640px) {
  .tata-letak {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "konten"
      "sidebar"
      "footer";
  }
}

Di desktop kamu dapat sidebar 240px di kiri dan konten memenuhi sisa lebar. Di bawah 640px, satu media query saja sudah cukup untuk menumpuk semuanya jadi satu kolom, dengan konten muncul sebelum sidebar. Kerangka seperti ini langsung terpakai di template Django maupun komponen React.

Kapan Pakai Flexbox, Kapan Pakai Grid

Aturan praktisnya: konten yang hanya mengalir satu arah, pakai Flexbox. Tombol di navbar, deretan ikon, badge di samping teks, semua itu Flexbox. Struktur yang punya baris dan kolom jelas, pakai Grid. Kalau ragu, tanya begini: apakah saya mengatur penempatan di dua sumbu sekaligus? Kalau iya, Grid. Kalau hanya satu sumbu, Flexbox.

Jangan merasa harus memilih salah satu. Meletakkan display: flex di dalam sel Grid adalah pola yang wajar dan justru paling umum di kode produksi. Jika menulis CSS mentah terasa lambat, Tailwind CSS membungkus Grid dan Flexbox menjadi class utility, tapi konsep dasarnya tetap yang kamu pelajari di sini.

Langkah berikutnya: ambil satu halaman yang sudah kamu punya, lalu ganti float dan margin penambalnya dengan Grid untuk kerangka dan Flexbox untuk isinya. Ukur perbedaannya dengan membuka DevTools dan memperkecil lebar layar. Kalau layoutnya tidak lagi melompat, berarti kamu sudah paham intinya.