CSS · 4 menit baca · Hyper Sheets

Hampir semua orang yang baru belajar layout pernah nanya ini. Jawabannya sering dibuat rumit, padahal kamu cukup bawa satu pertanyaan tiap kali mau menata sesuatu.

Satu pertanyaan: satu arah atau dua arah?

Kalau yang kamu atur cuma satu baris atau satu kolom, pakai Flexbox. Kalau kamu perlu baris dan kolom sejajar sekaligus, pakai Grid. Sisanya detail.

Flexbox: ukuran datang dari isinya

Flexbox menyusun item sepanjang satu sumbu. Tiap item boleh tumbuh atau menyusut sesuai isinya, jadi cocok buat navbar, deretan tombol, atau baris ikon dan teks.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Dengan flex-wrap: wrap, item boleh turun ke baris baru. Tapi tiap baris dihitung sendiri-sendiri, jadi kolomnya nggak dijamin lurus.

Grid: ukuran datang dari layoutnya

Grid menggambar kerangka dulu, baru item mengisi selnya. Baris dan kolom diatur bersamaan, jadi tepi tiap item lurus ke bawah dan ke samping.

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

Coba sendiri

Lima kartu yang sama, dua cara. Geser lebar wadahnya, lalu perhatikan baris terakhir.

Di Flexbox, kartu di baris terakhir melebar mengisi sisa ruang, jadi ukurannya beda dari kartu di atasnya. Di Grid, kartu tetap di kolomnya masing-masing, dan sisa ruang dibiarkan kosong.

Biasanya dipakai bareng

Layout halaman yang rapi hampir selalu memakai keduanya: Grid buat kerangka besar, Flexbox buat isi di dalam tiap bagian.

.kartu-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.kartu {
  display: flex;
  flex-direction: column;
}
.kartu .tombol {
  margin-top: auto; /* tombol selalu nempel di bawah */
}

Ringkasnya

• Satu arah: Flexbox. Dua arah: Grid.
• Flexbox mulai dari isi, Grid mulai dari kerangka.
• Kalau kolom harus lurus menembus beberapa baris, itu tugas Grid.
• Di halaman nyata, keduanya hampir selalu dipakai bersamaan.