Memahami CSS Flexbox dan Grid: Layout Modern untuk Web

CSS Flexbox dan Grid adalah dua sistem layout paling powerful di CSS modern. Memahami keduanya adalah skill wajib untuk web developer.

Flexbox: Layout Satu Dimensi

Flexbox cocok untuk layout yang mengatur elemen dalam satu arah (horizontal atau vertikal).

Dasar Flexbox

.container {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 1rem;
}

Properti Penting

Grid: Layout Dua Dimensi

Grid cocok untuk layout yang butuh mengatur baris dan kolom secara bersamaan.

Dasar Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Grid Template Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
}

Kapan pakai apa? Flexbox untuk komponen kecil (navbar, card). Grid untuk layout halaman penuh.