Gap dan Alignment pada Grid

Grid kita sudah adaptif, tetapi masih menyisakan dua hal yang menentukan rasa akhir sebuah layout: jarak antar track dan perataan isinya. Grid menyediakan properti gap yang sudah kita kenal dari Flexbox, ditambah enam properti alignment yang terbagi rapi dalam dua kelompok — perataan item di dalam sel dan distribusi track di dalam container. Setelah chapter ini, fondasi Grid kita tuntas dan siap menuju bagian kedua section.

gap: Jarak Antar Track #

Properti gap memberi jarak antar track tanpa margin dan tanpa trik. Versi longhand-nya membedakan dua arah:

.galeri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 24px;
  column-gap: 12px;
}

Demo berikut menunjukkan efeknya:

Shorthand gap: 24px 12px menuliskannya ringkas — nilai pertama untuk baris, kedua untuk kolom — dan gap: 16px berlaku untuk keduanya.

Tiga sifat gap yang penting diingat pada Grid:

• Gap hanya muncul di antara track; tidak ada ruang tambahan di tepi luar container.
• Gap dipotong lebih dulu sebelum satuan fr membagi ruang — itulah mengapa fr selalu muat.
• Grid tidak mengenal margin collapse; gap menggantikan permainan margin negatif dan :nth-child untuk mereset margin tepi yang kita lakukan pada layout lama.

Perataan Item dalam Sel: justify-items dan align-items #

Enam properti alignment Grid mengikuti dua sumbu. Pasangan justify-* bekerja pada inline axis (mendatar), pasangan align-* pada block axis (vertikal) — persis pola penamaan Flexbox yang sudah kita kuasai, hanya kini berlaku untuk grid item.

Nilai yang valid antara lain start, end, center, dan stretch. Perilaku default stretch menjelaskan pengamatan kita sepanjang section ini: kartu-kartu selalu “penuh” mengisi selnya tanpa kita suruh. Begitu kita menurunkan nilai menjadi center, item mengecil ke ukuran kontennya dan berkumpul di tengah sel.

Distribusi Track: justify-content dan align-content #

Kelompok kedua bekerja pada container, bukan item — dan hanya bereaksi ketika total ukuran track lebih kecil dari container. Kondisi ini muncul saat kita memakai track tetap, misalnya repeat(3, 90px) pada container selebar 600 piksel: track hanya mengisi 270 piksel plus gap, sisanya ruang kosong.

• justify-content mendistribusikan sisa ruang mendatar: start (default), center, end, space-between, space-around, space-evenly.
• align-content bekerja sama secara vertikal pada container yang lebih tinggi dari total barisnya.

Perbedaan dengan kelompok pertama sering tertukar, jadi pegang rumus ini: justify-items menggeser isi di dalam sel, sedangkan justify-content menggeser seluruh rangkaian track di dalam container. Jika kolommu sudah fr dan penuh, justify-content tidak punya ruang sisa untuk dibagi — persis perilaku Flexbox yang pernah kita bahas.

place-items: Shorthand Praktis #

Dua deklarasi yang paling sering ditulis bersama — align-items dan justify-items — punya shorthand place-items:

.pusat-kanan {
  display: grid;
  place-items: center;
  min-height: 240px;
}

Demo berikut memakai place-items: center pada grid baris setinggi 72 piksel — setiap nomor duduk persis di tengah selnya — lalu membandingkannya dengan track tetap yang dirangkai justify-content:

Pola perataan tengah seperti grid pertama adalah yang paling ringkas dimiliki CSS: urutannya <align> <justify>, dan pasangan per-item-nya adalah place-self. Pada grid kedua, space-evenly membagi sisa ruang container menjadi jarak yang sama besar, termasuk di kedua tepi.

Ringkasan #

gap memberi jarak antar track — dipotong sebelum fr membagi ruang, bebas margin collapse, dan tak menyisakan ruang di tepi. Enam properti alignment terbagi dua: justify-items/align-items (plus varian *-self) meratakan item di dalam sel, sedangkan justify-content/align-content mendistribusikan track di dalam container, dan place-items: center adalah ringkasannya untuk pola perataan tengah. Fondasi Grid kini lengkap dari definisi track hingga polesan visual. Bagian kedua section membuka babak baru: mengarahkan item ke posisi tertentu dengan grid-column dan grid-row.