Alignment dan Gap

Kisi yang telah terbentuk sering kali belum tampak rapi: track menempel di tepi kiri, item merapat ke atas, dan jarak antar kartu diakali dengan margin tambalan. Grid menyediakan keluarga properti box alignment yang mengatur semua itu secara eksplisit — perataan item di dalam areanya, perataan kumpulan track di dalam wadah, serta jarak antar track lewat gap . Chapter ini membedah kedua sumbu perataan, perbedaan akhiran -items dan -content, dan penggunaan gap sebagai pengganti margin antar elemen.

Dua Sumbu dan Dua Sasaran #

Perataan grid berputar pada dua pertanyaan yang berbeda. Pertanyaan pertama: di mana posisi item di dalam area yang ditempatinya — dijawab properti justify-items (sumbu inline, horizontal pada penulisan lazim) dan align-items (sumbu block, vertikal). Pertanyaan kedua: di mana posisi kumpulan track di dalam wadah — dijawab justify-content dan align-content.

Karena sasarannya berbeda, keempat properti ini bekerja berdampingan tanpa saling menimpa. justify-content: center menggeser seluruh blok track ke tengah wadah, sedangkan justify-items: center menengahkan isi setiap sel tanpa memindahkan track. Nilai yang dapat dipakai sebagian besar sama:

Dua kata kunci terakhir hanya berlaku untuk -content, karena pembagian ruang antar track tidak bermakna untuk satu item. Bila kedua sumbu ingin diatur dengan satu deklarasi, gunakan bentuk singkat place-items: center — urutannya align-items lalu justify-items — dan place-content untuk pasangan -content.

Gap: Jarak Antar Track #

Properti gap memberi jarak tetap antar track: gap: 16px menerapkan 16px pada kedua sumbu, sedangkan row-gap dan column-gap mengaturnya terpisah, misalnya gap: 24px 12px. Ruang gap adalah bagian kisi yang tidak dapat ditempati item — berbeda dari margin, gap tidak menumpuk, tidak perlu dibersihkan, dan tidak ikut ter-collapse. Perlu diingat pula dari Chapter Fr Unit: total gap dipotong dari wadah sebelum satuan fr membagi sisa ruang.

gap bukan milik eksklusif grid; properti yang sama bekerja pada flexbox di seluruh browser modern, sehingga kebiasaan memberi jarak lewat gap dapat dibawa ke kedua model layout.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Alignment dan Gap</title>
  <style>
    .papan {
      display: grid;
      width: 400px;
      height: 220px;
      grid-template-columns: 100px 100px;
      grid-auto-rows: 60px;
      gap: 16px;
      justify-content: center;
      align-content: center;
      justify-items: center;
      align-items: center;
    }
    .papan > div { width: 40px; height: 40px; background: rgb(219, 234, 254); border: 1px solid rgb(59, 130, 246); }
    .stretch { display: grid; width: 300px; grid-template-columns: 100px 100px; }
  </style>
</head>
<body>
  <div class="papan">
    <div>Sel 1</div>
    <div>Sel 2</div>
  </div>
  <div class="stretch">
    <div>Item stretch</div>
    <div>Item stretch</div>
  </div>
</body>
</html>

Hasil di Browser:

Papan perataan (wadah 400x220px, dua kolom 100px, gap 16px):
computed justify-content "center", align-content "center",
justify-items "center", align-items "center", dan gap "16px".
Blok dua track berukuran 216px itu ditengahkan di wadah, dan setiap
sel 40x40px ditengahkan di dalam areanya.
Papan stretch (tanpa deklarasi perataan): item membentang mengisi
kolomnya sehingga computed width 100px — efek nilai bawaan stretch.

Mari kita telaah deklarasi pada .papan baris demi baris:

1. Baris 10 (gap: 16px): jarak 16px berlaku pada baris dan kolom sekaligus; total lebar blok dua kolom menjadi 100 + 16 + 100 = 216px.
2. Baris 11–12 (justify-content dan align-content): blok track 216px itu ditengahkan secara horizontal dalam wadah 400px, dan kumpulan barisnya ditengahkan vertikal dalam tinggi 220px.
3. Baris 13–14 (justify-items dan align-items): setiap item 40x40px ditengahkan di dalam sel 100x60px miliknya. Tanpa kedua deklarasi ini, item akan membentang mengisi sel (nilai bawaan stretch).

Demo chapter ini memuat penanda uji otomatis yang memverifikasi keempat nilai perataan pada papan, jarak gap: 16px, serta lebar 100px pada item yang membentang di papan tanpa deklarasi perataan.