Deretan kartu produk adalah pola layout yang paling sering kita temui di toko daring, dan CSS Grid memiliki satu baris kode yang menjadi jawaban bakunya: repeat(auto-fit, minmax(240px, 1fr)). Pola ini menata ulang jumlah kolom secara mandiri begitu lebar ruang tersedia berubah — tiga kolom di layar lebar, dua di tablet, satu di ponsel — tanpa satu media query pun. Pada chapter ini kita membedah mengapa pola itu bekerja, melengkapinya dengan kartu ber-flexbox internal, dan menyetel lebarnya.

Pola Inti: auto-fit plus minmax #

css 
.deretan-produk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Mari kita uraikan baris demi baris:

  1. minmax(240px, 1fr): setiap track berukuran minimal 240 piksel dan boleh mengembang hingga satu fraksi ruang tersisa — gabungan dua chapter awal section ini.
  2. repeat(auto-fit, ...): alih-alih menyebut jumlah, browser menghitung sendiri berapa track berlebar minimal 240 piksel yang muat di container, lalu membagi sisa ruang ke semua track lewat 1fr.
  3. auto-fit melipat track kosong: bila item tidak cukup memenuhi baris terakhir, track kosong dipersempit menjadi nol sehingga item yang ada tetap melebar penuh. (auto-fill menyisakan track kosong sebagai cadangan — perbedaannya sudah kita bahas pada chapter tersendiri.)

Mengapa tanpa media query? Karena jumlah kolom dihitung ulang setiap lebar container berubah: keputusan yang biasanya kita tulis di media query kini didelegasikan ke mesin layout browser.

Melengkapi dengan Kartu Flexbox Internal #

Grid mengatur deretannya; isi kartu tetap pekerjaan flexbox yang sudah kita kuasai di section sebelumnya:

css 
.kartu-produk {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}

.kartu-isi {
  flex-grow: 1;
  padding: 12px 14px;
}

.kartu-aksi {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #eef2f6;
}

Item grid membentang penuh tinggi barisnya secara default, sehingga kartu dalam satu baris otomatis sama tinggi. Berbeda dari flexbox yang hanya menggarisi satu baris pada satu waktu, baris kedua di grid tetap berbagi kolom track dengan baris pertama — semua kolom lurus dari ujung atas ke ujung bawah.

Demo berikut merangkai pola inti beserta kartunya; angka minimumnya diturunkan ke 150 piksel agar lebih banyak kolom muat di dalam bingkai — polanya identik dengan 240 piksel:

Penyetelan Lebar dan Kontainer #

Angka 240 bukan ketentuan baku: kartu produk nyaman di 220–260 piksel, galeri foto bisa turun ke 160 piksel. Sisanya adalah pekerjaan bingkai halaman biasa:

css 
.bungkus-toko {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}

Ringkasan #

Pola repeat(auto-fit, minmax(240px, 1fr)) memindahkan keputusan jumlah kolom dari penulis CSS ke mesin layout: track dihitung dari lebar ruang yang benar-benar tersedia, track kosong dilipat, dan sisa ruang dibagi rata. Dipadukan dengan kartu flexbox internal, pola ini menyelesaikan deretan produk dengan satu deklarasi track. Pola berikutnya kembali ke struktur halaman: sidebar dan konten, pasangan klasik situs dokumentasi dan dasbor.