Auto-Fill dan Auto-Fit

Sejauh ini kita selalu menentukan jumlah kolom secara manual — padahal kisi kartu modern harus menyesuaikan jumlah kolomnya sendiri mengikuti lebar layar. Di sinilah dua kata kunci repeat() berperan: auto-fill dan auto-fit meminta browser menghitung berapa kolom yang muat, lalu mengisinya dengan kartu. Satu baris deklarasi menggantikan media query berlapis-lapis, dan perbedaan di antara keduanya — meski halus — menentukan tampilan ketika jumlah kartu tidak pas.

Satu Baris untuk Kisi Kartu Responsif #

Gabungan yang paling sering dipakai di seluruh dunia Grid adalah ini:

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

Deklarasi ini membaca seperti kalimat: “buat kolom selebar setidaknya 220 piksel; jumlahkan sebanyak mungkin yang muat di container; lalu setiap kolom boleh tumbuh (1fr) mengisi ruang sisa.” Browser menyelesaikan tiga langkah itu secara otomatis:

1. Ukur lebar container.
2. Hitung berapa kolom minimum 220 piksel (ditambah gap) yang muat — hasilnya berubah sendiri saat layar melebar atau menyempit.
3. Bagi ruang sisa secara merata ke semua kolom sehingga kartu lebih lebar dari 220 piksel.

Demo berikut menunjukkan efeknya:

Perbedaan auto-fill dan auto-fit #

Kedua kata kunci menghitung jumlah kolom dengan cara yang sama. Perbedaannya muncul hanya ketika ada track yang tidak terisi item:

auto-fill artinya “isi sebanyak mungkin kolom yang bisa dibuat” — kolom yang tak kebagian item tetap ada, kosong. auto-fit artinya “sesuaikan kolom dengan item yang ada” — track kosong dilipat, lalu item membagi ulang ruangnya. Ketika item memenuhi semua track, keduanya menghasilkan layout yang identik; perbedaan hanya terlihat pada baris terakhir yang tidak penuh atau saat item sangat sedikit.

Demo berikut menaruh lima item pada grid yang menyediakan enam track — situasi di mana kedua kata kunci terlihat berbeda:

Mana yang Dipilih #

• Pilih auto-fill ketika lebar kartu harus konsisten antar baris — misalnya katalog yang datanya bertahap masuk: kolom cadangan sudah “dipesan”, sehingga kartu baru tidak mendadak melebar.
• Pilih auto-fit ketika jumlah item wajar berubah-ubah dan kita ingin halaman selalu terlihat penuh — misalnya daftar kategori yang kadang dua, kadang tujuh. Inilah pilihan bawaan yang aman untuk kebanyakan kisi kartu.

Satu kasus tepi yang patut dikenali: ketika container lebih sempit dari minimum minmax(), kedua kata kunci hanya menghasilkan satu kolom dan grid meluap. Untuk ponsel sangat kecil, turunkan angka minimumnya, atau beri min-width: 0 pada konten kartu agar teksnya boleh menyusut.

Ringkasan #

repeat(auto-fit, minmax(220px, 1fr)) adalah satu baris yang menggantikan media query berlapis: browser menghitung sendiri berapa kolom yang muat, membagi ruang sisa secara merata, dan menata ulang kolom saat layar berubah. auto-fill menjaga track kosong agar lebar kartu konsisten, sedangkan auto-fit melipatnya agar halaman terlihat penuh; pada grid yang terisi penuh keduanya identik. Grid kita kini adaptif, tetapi kartu-kartunya masih menempel rapat dan perataan isinya belum diatur — chapter berikutnya menyempurnakannya dengan gap dan keluarga properti alignment.