Pola: Card Grid

Deretan kartu adalah pola konten paling produktif di web modern: produk pada toko daring, artikel pada blog, fitur pada landing page — semuanya berderet dalam kotak-kotak seragam. Mesinnya sudah kita kuasai di chapter Responsive Card Grid pada section CSS Grid. Pada chapter ini kita memasang mesin itu pada skala section halaman: jarak antarbagian yang konsisten, kartu yang sama tinggi, dan tombol aksi yang sejajar rapi di dasar setiap kartu.

Grid Kartu Responsif #

Inti polanya satu deklarasi kolom yang menyesuaikan diri:

.grid-kartu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

Angka 240px adalah lebar minimum kartu yang nyaman dibaca; di bawah itu, kolom baru dibentuk. Recap singkat dari chapter auto-fill dan auto-fit: auto-fit melipat track kosong menjadi nol sehingga kartu yang sedikit tetap melebar memenuhi baris, sementara auto-fill mempertahankan track kosong. Untuk deretan konten nyata, auto-fit hampir selalu pilihan yang tepat. Jarak antarkartu diatur lewat gap — bukan margin pada kartu — sehingga tepi deretan tetap lurus dengan container.

Kartu Sama Tinggi, Aksi di Dasar #

Dua property yang bekerja di tingkat kartu menyelesaikan dua keluhan klasik: tinggi yang tidak seragam dan tombol yang melayang naik-turun:

.kartu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

.kartu-aksi {
  margin-top: auto;
}

Mekanismenya dua lapis. Lapis pertama di grid: item grid secara default membentang mengikuti tinggi barisnya (stretch), jadi kartu terpanjang menentukan tinggi baris dan kartu lain menyamainya. Lapis kedua di dalam kartu: flex column menyusun isinya dari atas, lalu margin-top: auto pada aksi menyerap seluruh ruang sisa di atasnya sehingga aksi terdorong ke dasar — pola auto margin yang sama yang kita pakai di navbar. Untuk kartu yang isinya lebih kompleks, pola lengkapnya sudah dibahas pada chapter Pola Layout: Card di section Flexbox.

Demo berikut merakit section lengkap: container, judul, dan empat kartu produk dengan aksi sejajar di dasar. Perkecil lebar bingkai demo dan lihat kolomnya menyusut sendiri tanpa media query:

Jarak Antarbagian Halaman #

Grid kartu tidak berdiri sendiri; ia hidup di dalam section yang punya ritme vertikal:

.section-produk {
  padding-block: var(--space-8, 64px);
  background-color: #f8faf7;
}

.section-produk .grid-kartu {
  margin-top: 32px;
}

Dua hal yang menarik dari resep kecil ini. Pertama, padding-block mengatur ritme vertikal section di satu tempat — nilai 64px idealnya diambil dari token spacing seperti --space-8 yang kita singgung pada chapter Content Wrapper, dengan nilai fallback di dalam var() bila token belum didefinisikan. Kedua, section tetap dibungkus centered container dari chapter pertama section ini, sehingga grid kartunya tidak pernah melebar melebihi batas halaman. Komposisi tiga pola — container, section spacing, grid kartu — inilah bentuk paling umum dari “section produk” di web nyata.

Kesalahan Umum #

Ringkasan #

Section kartu adalah komposisi tiga pola: centered container menjaga lebar, padding-block memberi ritme antarseksi, dan repeat(auto-fit, minmax()) mengatur kolom tanpa media query. Kesamaan tinggi hadir gratis dari grid, dan margin-top: auto menyatukan aksi di dasar kartu. Pola berikutnya tetap di seputar konten panjang: layout artikel dengan kolom baca dan gambar yang boleh lebih lebar.