cssgridflexboxlayoutMenengah4 mnt baca

Grid vs Flexbox

Kapan memakai grid, kapan flexbox, dan kapan menggabungkannya.

Bukan lawan, tapi pasangan

Pertanyaan "grid atau flexbox?" adalah pertanyaan yang salah. Mereka dirancang untuk masalah berbeda dan sering dipakai bersamaan dalam satu halaman.

Aturan praktis satu kalimat: flexbox untuk layout satu dimensi, grid untuk dua dimensi.

Kapan flexbox menang?

Navbar: logo, menu, tombol dalam satu baris.
Barisan tombol, badge, atau chip.
Centering satu item.
Konten yang mengalir dan jumlahnya tidak pasti (wrap).

Flexbox berpikir dari konten: item mengatur dirinya relatif terhadap item lain di satu sumbu.

css

/* flexbox: konten menentukan */
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

Kapan grid menang?

Layout halaman: header, sidebar, konten, footer.
Galeri dengan kolom sejajar rapi.
Dashboard widget dengan ukuran petak presisi.
Apa pun yang butuh perataan dua arah sekaligus.

Grid berpikir dari wadah: kamu mendefinisikan petak dulu, item menempatinya.

css

/* grid: wadah menentukan */
.halaman {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "sidebar konten";
}

Pola gabungan yang umum

Sangat normal memakai keduanya: grid untuk kerangka halaman, flexbox di dalam tiap area.

css

.halaman {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas: "sidebar konten";
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kartu-produk {
  display: flex;
  flex-direction: column;
}
.kartu-produk .tombol {
  margin-top: auto;
}

Contoh konkret: halaman dashboard memakai grid untuk kolom sidebar + area konten, lalu di dalam area konten ada grid galeri kartu, dan di dalam tiap kartu ada flexbox kolom untuk tombol rata bawah. Tiga lapis, masing-masing dengan alat yang tepat.

Catatan teknis: jangan memaksakan satu alat untuk semua. Tanda kamu memakai alat yang salah: banyak wrapper div bersarang hanya untuk perataan, atau perhitungan lebar manual yang rapuh.

Tips profesional

Tes cepat: "apakah saya butuh mengatur BARIS dan KOLOM sekaligus?" Ya = grid, tidak = flexbox.
Komponen satu dimensi di dalam sel grid: selalu flexbox (misal isi kartu).
Jangan takut mencampur: halaman memakai grid areas, tiap area memakai flexbox/grid lagi. Itulah cara profesional membangun layout.

Pola siap salin: putuskan dalam 10 detik

css

/* Butuh baris DAN kolom? -> grid */
.halaman { display: grid; }

/* Hanya sebaris / sekolom? -> flexbox */
.toolbar { display: flex; }

/* Ragu? Mulai dari flexbox; pindah ke grid saat butuh alignment 2 arah. */

Aturan praktis: flexbox dulu untuk komponen, grid untuk kerangka halaman. Refactor saat kebutuhan 2D muncul.

Rangkuman

Satu dimensi (baris/kolom mengalir) = flexbox. Dua dimensi (petak baris + kolom) = grid. Gabungkan: grid untuk kerangka, flexbox untuk isi tiap area.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Audit Pilihan Alat

Memilih alat yang tepat menghemat jam debugging. Latihan ini melatih insting itu.

Di playground, identifikasi di komentar untuk tiap bagian (halaman, sidebar, konten): kenapa bagian itu memakai grid atau flexbox?

Lalu kerjakan: ubah .konten menjadi flexbox wrap. Amati apa yang hilang (kolom tidak lagi sejajar rapi). Kembalikan ke grid dan tulis di komentar kapan flexbox wrap boleh menggantikan grid galeri.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox