Flexbox Spacing: Menguasai Properti Gap
Properti gap menentukan jarak antar elemen (talang/gutter) di dalam kontainer Flexbox. Hal yang luar biasa adalah gap hanya memberikan jarak di antara elemen, bukan di sekeliling luar elemen tersebut.
1. Mengenal Jenis-Jenis Gap
Anda bisa menggunakan properti tunggal (gap) atau spesifik berdasarkan arahnya:
-
row-gap: Mengatur jarak antar baris (saat elemen membungkus ke baris baru atau saatflex-direction: column). -
column-gap: Mengatur jarak antar kolom (secara horizontal). -
gap(Shorthand): Mengatur keduanya sekaligus.-
gap: 20px;(Baris dan kolom sama-sama 20px). -
gap: 10px 30px;(Baris 10px, Kolom 30px).
-
2. Mengapa Gap Lebih Baik dari Margin?
| Fitur | Menggunakan Margin | Menggunakan Gap |
| Elemen Terakhir | Harus dihapus manual dengan :last-child. |
Otomatis tidak ada jarak di elemen terakhir. |
| Kemudahan | Harus menghitung margin kiri/kanan agar pas. | Cukup tentukan satu nilai di kontainer induk. |
| Responsif | Sering merusak lebar total kontainer. | Menjaga elemen tetap di dalam batas kontainer. |
Tutorial: Membuat Grid Kartu Berita yang Rapi
Mari kita terapkan pada susunan kartu di portal SatuMedia (riwara.id) agar jarak antar beritanya konsisten.
Struktur HTML
<div class="news-grid"> <div class="card">Berita Adiv> <div class="card">Berita Bdiv> <div class="card">Berita Cdiv> <div class="card">Berita Ddiv>
div>
Kode CSS
.news-grid { display: flex; flex-wrap: wrap; /* Izinkan elemen turun ke baris baru */ /* Memberi jarak antar baris dan kolom tanpa ribet */ gap: 24px; padding: 20px; background-color: #f4f4f4;
} .card { /* Contoh lebar kartu agar muat 2 per baris (dikurangi gap) */ flex: 1 1 calc(50% - 12px); height: 150px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
Tips Pro untuk Developer
-
Dukungan Browser: Dahulu
gaphanya untuk CSS Grid, namun sekarang hampir semua browser modern (Chrome 84+, Safari 14.1+) sudah mendukunggapuntuk Flexbox. -
Gunakan pada Navbar: Gunakan
gappada elemen- di navigasi untuk memberi jarak antar menu secara instan tanpa perlu
margin-right- pada tiap
- .
-
Konsistensi Desain: Gunakan variabel CSS untuk nilai gap Anda (misal:
--main-gap: 20px;) agar jarak antar elemen di seluruh aplikasi Kolak Pisang atau SatuMedia terlihat seragam.
