cssgridgapMenengah4 mnt baca

Gap di Grid

gap, row-gap, column-gap di grid dan kenapa lebih baik dari margin.

Kenapa gap penting di grid?

Bayangkan galeri 3 kolom dengan margin: tiap item punya margin 12px, tapi item di tepi kiri-kanan ikut terdorong sehingga total lebar meluber, dan kamu harus menghitung ulang lebar kolom dikurangi margin. Menyakitkan. gap menyelesaikan ini: jarak hanya ada di antara trek, tidak di tepi wadah, dan lebar kolom fr dihitung setelah gap dikurangi.

css

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* 16px antar kolom DAN antar baris */
}

gap dua arah

css

.tabel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 24px;    /* jarak vertikal antar baris */
  column-gap: 12px; /* jarak horizontal antar kolom */
}

/* shorthand: gap: <row> <column> */
.tabel2 {
  gap: 24px 12px;
}

Satu nilai gap: 16px berarti kedua arah sama. Dua nilai berarti baris dulu, kolom kemudian.

gap vs margin: perbandingan nyata

Contoh masalah margin:

css

/* CARA LAMA dengan margin: perlu hack */
.item { margin: 8px; }
.galeri { margin: -8px; } /* kompensasi tepi, jelek! */

Dengan gap, tidak ada hack apa pun. Lebih jauh lagi, gap ikut diperhitungkan mesin layout: 1fr berarti "satu bagian dari ruang setelah gap dikurangi", sehingga kolom tidak pernah meluber.

css

/* CARA MODERN: bersih */
.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Gap responsif

Gap juga bisa menyesuaikan ukuran layar, misalnya lebih rapat di mobile:

css

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(8px, 2vw, 24px);
}

clamp() membuat gap tumbuh mengikuti lebar viewport, dibatasi minimal 8px dan maksimal 24px.

Catatan teknis: gap di grid didukung semua browser modern sejak lama (lebih dulu dari gap di flexbox). Properti lama grid-gap, grid-row-gap, grid-column-gap sudah usang: pakai gap saja.

Tips profesional

Konsistensi gap = konsistensi desain. Tetapkan skala (8/16/24/32px) sebagai variabel dan pakai di semua grid.
Gap besar (24px+) untuk section landing; gap kecil (8-12px) untuk galeri foto rapat.
gap juga berfungsi di grid bersarang: tiap level grid boleh punya gap sendiri.

Pola siap salin: skala gap konsisten

css

:root {
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 32px;
}

.galeri { display: grid; gap: var(--gap-md); }
.hero-grid { display: grid; gap: var(--gap-lg); }

Satu skala gap untuk seluruh situs: galeri rapat, section lega, selalu konsisten.

Gap sebagai design token

css

:root { --gap: clamp(12px, 2vw, 24px); }

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}

Gap yang ikut membesar di layar besar dan merapat di HP: satu variabel, seluruh situs responsif.

Rangkuman

gap memberi jarak antar trek tanpa mengotori tepi dan tanpa hack margin. Pakai row-gap/column-gap untuk jarak berbeda per arah, dan ingat fr dihitung setelah gap.

Live Playground

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

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

Tantangan

Gap Beda Arah

Menguasai gap membuat galerimu rapi tanpa perhitungan manual yang rawan salah.

Di playground:

Buat jarak antar baris 32px dan antar kolom 8px memakai row-gap/column-gap.
Coba ganti gap menjadi margin pada .item (margin: 8px), amati tepi galeri ikut terdorong dan tidak rapi. Kembalikan ke gap.
Di komentar, jelaskan kenapa gap lebih aman dari margin untuk grid.

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