CSS Grid vs Flexbox: Perbedaan dan Kapan Harus Memakainya

Dua Raja Layout di Era Modern

Dulu, developer harus menggunakan trik aneh bernama float: left dan clear: both untuk membuat kotak berdampingan. Kini, tugas mengatur tata letak (Layout) dikuasai penuh oleh CSS Flexbox dan CSS Grid. Karena keduanya terlihat mirip, pemula sering bingung kapan harus memakai yang mana.

Flexbox: Sang Ahli Baris Tunggal (1 Dimensi)

Flexbox (Flexible Box) dirancang khusus untuk mengatur elemen dalam Satu Arah (Satu Dimensi). Kamu hanya bisa memilih: apakah elemen-elemen ini berbaris menyamping ke kanan (Row) ATAU berbaris ke bawah (Column).

• Kekuatan Utama: Fleksibilitas. Flexbox sangat pandai membagi ruang kosong. Jika ada 3 tombol yang ukurannya beda-beda, Flexbox bisa meratakan (Align) dan memusatkan (Center) ketiganya dengan satu baris kode (justify-content: center).
• Gunakan Flexbox untuk: Mengatur jejeran tombol *Navbar* (Menu Atas), merapikan isi sebuah kotak *Card* (seperti mengatur teks di samping foto profil), atau menengahkan ikon secara sempurna (Vertical Align).

CSS Grid: Sang Ahli Papan Catur (2 Dimensi)

Berbeda dengan Flexbox, CSS Grid diciptakan untuk mengendalikan tata letak dalam Dua Arah Sekaligus (Dua Dimensi). Grid bisa mengatur Baris (Row) dan Kolom (Column) di saat yang bersamaan secara presisi matematika.

• Kekuatan Utama: Struktur yang Kaku dan Presisi. Grid ibarat membuat kerangka lemari buku. Kamu bisa membagi layarmu menjadi 12 kolom, lalu menyuruh elemen Sidebar untuk menempati kolom 1 sampai 3, dan elemen Konten menempati kolom 4 sampai 12.
• Gunakan CSS Grid untuk: Membangun kerangka raksasa sebuah halaman web (Membuat Header, Sidebar, Main Content, dan Footer), atau membuat Galeri Foto (*Image Gallery*) di mana setiap kotaknya berukuran rapi seperti ubin lantai.

Aturan Praktis (Rule of Thumb)

Bagaimana cara menggabungkannya di dunia nyata? Aturan emas dari para *Senior Frontend* adalah: Gunakan CSS Grid untuk struktur besar dari luar (Makro), dan gunakan Flexbox untuk merapikan elemen-elemen kecil di dalamnya (Mikro).

Misalnya: Gunakan Grid untuk mengatur 9 buah Kartu Produk (Product Cards) agar tampil berbaris 3x3. Namun, untuk mengatur posisi Harga dan Tombol "Beli" di dalam masing-masing kartu tersebut, gunakanlah Flexbox!