cssflexboxgapMenengah3 mnt baca

Gap di Flexbox

gap, row-gap, column-gap: cara modern memberi jarak antar item tanpa margin hack.

Masalah lama: margin hack

Dulu, jarak antar flex item dibuat dengan margin, yang menimbulkan masalah klasik: margin ganda di tepi dan margin terakhir yang mengganggu.

css

/* CARA LAMA: berantakan */
.item { margin-right: 12px; }
.item:last-child { margin-right: 0; }

Solusi modern: gap

css

.wadah {
  display: flex;
  gap: 12px; /* jarak antar item, tanpa efek di tepi */
}

gap hanya memberi jarak di antara item, tidak di tepi wadah. Tidak perlu :last-child hack lagi.

row-gap dan column-gap

css

.wadah {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;    /* jarak antar baris */
  column-gap: 8px;  /* jarak antar kolom */
}

Satu nilai gap: 12px = kedua arah sama. Dua nilai gap: 16px 8px = row column.

Catatan teknis: gap didukung di flexbox sejak 2021 di semua browser modern. Untuk project yang harus mendukung browser sangat lama, fallback margin masih diperlukan, tapi kasus itu kini jarang.

Kenapa gap lahir belakangan?

Gap awalnya milik grid. Developer memohon agar flexbox punya juga karena margin hack (margin-right + :last-child) terbukti rawan salah. Sejak 2021, gap resmi di flexbox dan margin hack bisa pensiun.

Contoh: tombol aksi berderet

css

.aksi {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* di HP tombol turun baris dengan jarak tetap rapi */
}

.aksi button {
  padding: 10px 20px;
  border-radius: 8px;
}

Dengan wrap + gap, baris kedua tetap punya jarak vertikal yang benar tanpa margin-top manual.

Contoh: gap berbeda per arah

css

.form-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;    /* jarak antar baris form */
  column-gap: 16px; /* jarak antar kolom */
}

Jebakan

Gap tidak bekerja di browser sangat lama. Untuk IE11 (sudah mati), fallback margin diperlukan. Untuk semua browser modern: aman.

Gap vs space-between. Jangan pakai keduanya untuk tujuan yang sama: gap untuk jarak antar item, space-between untuk distribusi ke tepi. Kombinasi yang benar: justify-content: space-between + gap kecil sebagai jarak minimum antar item.

Tips profesional

Nilai gap bisa memakai variabel: gap: var(--jarak); sehingga satu perubahan mengatur semua jarak situs.
Gap persen (gap: 2%) mengacu ke dimensi wadah: berguna untuk jarak proporsional.
Saat migrasi kode lama dari margin hack ke gap, hapus SEMUA margin item terkait sekaligus; sisa satu margin akan menggandakan jarak.

Pola siap salin: grup tombol responsif

css

.grup-tombol {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.grup-tombol .utama {
  margin-right: auto; /* dorong sisanya ke kanan */
}

margin-right: auto pada tombol pertama + gap untuk sisanya: pola toolbar "aksi utama kiri, aksi sekunder kanan" yang dipakai di hampir semua dashboard.

Rangkuman

Lupakan margin hack untuk jarak antar item. Pakai gap (atau row-gap/column-gap) yang bersih dan hanya bekerja di antara item.

Live Playground

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

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

Tantangan

Bersihkan Margin Hack

Di playground:

Refaktor .lama menjadi memakai gap (hapus margin hack-nya). Hasil visual harus identik.
Buat wadah wrap dengan 6 item: row-gap: 20px dan column-gap: 10px.
Di komentar, jelaskan kenapa gap tidak menambah jarak di tepi wadah.

<!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