Gap

Memberi jarak antar items terdengar sepele, tetapi selama bertahun-tahun jawabannya adalah margin yang ditemani selektor tambahan: margin kiri untuk semua item, lalu margin kiri dihapus untuk item pertama. gap menyederhanakan semuanya — satu deklarasi di container, dan jarak muncul persis di antara items, tanpa apa pun di tepi. Properti ini juga bekerja di kedua sumbu sekaligus, termasuk jarak antar baris pada flex yang di-wrap. Pada Chapter ini kita membedah penulisannya, membandingkannya dengan margin, dan mengecek dukungan browsernya.

row-gap, column-gap, dan Shorthand gap #

Gap memiliki dua longhand: row-gap untuk jarak antar baris dan column-gap untuk jarak antar kolom. Shorthand gap menulis keduanya — satu nilai berarti kedua sumbu, dua nilai berarti row-gap lalu column-gap. File CSS berikut dipakai oleh demo chapter ini:

.papan-gap {
  display: flex;
  gap: 16px;               /* singkatan: row-gap 16px, column-gap 16px */
  width: 600px;
  background: rgb(241, 245, 249);
}
.papan-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 24px;
  width: 400px;
  background: rgb(241, 245, 249);
}
.papan-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;           /* hanya baris; column-gap tetap normal */
  width: 200px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 100px;
  height: 56px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 56px;
}
.chip {
  width: 90px;
  height: 40px;
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  text-align: center;
  line-height: 40px;
}

Mari kita telaah ketiga papan tersebut:

1. .papan-gap (gap: 16px): tiga kotak 100px tersusun dengan dua celah 16px; total kebutuhan 332px, jauh di bawah lebar container 600px.
2. .papan-wrap (row-gap 8px, column-gap 24px): delapan chip 90px terbagi tiga per baris — perhitungannya memperhitungkan gap: 3 × 90px + 2 × 24px = 318px masih muat di 400px, empat chip tidak.
3. .papan-row (hanya row-gap 12px): sumbu yang tidak diatur tetap bernilai normal, yang pada flex berarti nol — chip dalam satu baris saling menempel, sementara antar baris berjarak 12px.

Hasil di Browser:

Papan pertama: tiga kotak tersusun dengan jarak 16px di antara mereka;
computed gap, row-gap, dan column-gap masing-masing 16px.
Papan kedua: delapan chip terbagi ke baris berisi tiga chip; jarak antar
kolom 24px dan antar baris 8px.
Papan ketiga: hanya row-gap yang diatur (12px); computed column-gap tetap
normal sehingga chip dalam satu baris saling menempel.

gap vs margin #

Keduanya membuat “jarak”, tetapi mekanismenya berbeda dan konsekuensinya terasa di layout nyata:

Dua sifat gap inilah yang paling menghemat: tidak ada jarak di tepi sehingga container bisa dipusatkan atau dibatasi padding dengan hitungan yang bersih, dan jarak antar baris pada flex-wrap: wrap teratur tanpa trik. Sementara itu, margin tetap berguna untuk jarak yang tidak seragam — misalnya menarik satu item menjauh dari kelompoknya dengan margin-left: auto pada pola kartu.

Dukungan Browser #

Gap pada flexbox didukung penuh oleh seluruh browser modern sejak 2020–2021 dan pada grid bahkan lebih awal, sehingga fitur ini aman dipakai tanpa fallback untuk proyek baru. Bila proyek masih menargetkan browser lama yang tercantum di caniuse , pola margin per item tetap bisa dipertahankan sebagai fallback — tetapi untuk mayoritas kasus, gunakan gap dan jangan menoleh ke belakang. Rujukan lengkapnya tersedia di MDN: gap .

Sekarang seluruh perkakas flexbox telah kita pegang: container dan items, dua sumbu, arah, penjajaran dua sisi, pembungkusan, distribusi ruang, dan jarak antar items. Chapter penutup section ini menyatukannya menjadi pola-pola layout yang dipakai sehari-hari.

.papan-gap {
  display: flex;
  gap: 16px;               /* singkatan: row-gap 16px, column-gap 16px */
  width: 600px;
  background: rgb(241, 245, 249);
}
.papan-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 24px;
  width: 400px;
  background: rgb(241, 245, 249);
}
.papan-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;           /* hanya baris; column-gap tetap normal */
  width: 200px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 100px;
  height: 56px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 56px;
}
.chip {
  width: 90px;
  height: 40px;
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  text-align: center;
  line-height: 40px;
}