Flexbox vs CSS Grid: Rahasia Membuat Layout Website yang Responsif

Selamat tinggal CSS Float!

Sebelum tahun 2015, menyelaraskan elemen di tengah halaman (centering) atau membuat kolom sejajar di CSS adalah sebuah siksaan. Developer harus menggunakan trik aneh dengan float atau meretas tabel HTML. Kini, kita punya dua senjata super: Flexbox dan CSS Grid. Masalahnya, kapan harus pakai yang mana?

Flexbox: Jagoan Satu Dimensi (1D)

Flexbox (Flexible Box Layout) didesain untuk merapikan elemen dalam satu arah pada satu waktu—entah itu menyamping (baris/row) ATAU menurun (kolom/column).

• Cocok digunakan untuk: Mengatur isi Navigation Bar (logo di kiri, menu di kanan), menengahkan icon di dalam tombol, atau membuat deretan kartu yang membungkus (wrap) ke bawah saat layar mengecil.
• Cara berpikir: "Saya punya kontainer, tolong sebar anak-anak di dalamnya dengan jarak yang merata."

.navbar {
  display: flex;
  justify-content: space-between; /* Pisahkan ke ujung-ujung */
  align-items: center; /* Tengahkan secara vertikal */
}

CSS Grid: Arsitek Dua Dimensi (2D)

CSS Grid didesain untuk merancang layout dalam dua arah sekaligus: Baris (Row) DAN Kolom (Column) bersamaan. Ini seperti membuat kerangka papan catur.

• Cocok digunakan untuk: Membuat pondasi utama layout website (Header di atas, Sidebar di kiri, Konten di kanan, Footer di bawah), atau membuat galeri foto dengan ukuran kotak yang bervariasi.
• Cara berpikir: "Saya membagi layar ini menjadi 12 kolom dan 3 baris. Elemen A tolong tempati baris 1 kolom 1-12."

.gallery-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom sama besar */
  gap: 20px; /* Jarak antar kotak */
}

Bisa nggak dipakai bersamaan?

Bisa dan sangat dianjurkan! Keduanya bukan saingan, tapi tim yang solid. Praktik terbaik saat ini adalah menggunakan Grid untuk kerangka struktur utama halaman, dan menggunakan Flexbox di dalam kerangka tersebut untuk merapikan isi detail tiap elemen (seperti merapikan teks dan gambar di dalam sebuah kartu).

Kesimpulan

Jangan paksakan Grid untuk komponen kecil, dan jangan paksakan Flexbox untuk layout halaman yang kompleks. Pahami kekuatan keduanya, maka tidak akan ada lagi desain website yang berantakan saat dibuka di layar handphone.