Materi
Grid dengan repeat(3, 1fr) selalu punya tiga kolom, selebar apa pun layarnya. Di ponsel 360 piksel, tiga kolom itu menyempit sampai teks di dalamnya terpotong-potong. Grid bisa menentukan jumlah kolomnya sendiri dari lebar yang tersedia, tanpa media query, dengan menggabungkan fungsi minmax() dan kata kunci auto-fill atau auto-fit di dalam repeat().
minmax()
Fungsi minmax(min, max) menetapkan rentang ukuran satu jalur grid: tidak lebih kecil dari nilai pertama dan tidak lebih besar dari nilai kedua. Nilai minmax(180px, 1fr) berarti kolom paling sempit 180 piksel dan boleh melebar mengambil sisa ruang. Satuan fr hanya sah sebagai nilai kedua, dan bila nilai maksimum lebih kecil dari minimum, maksimumnya diabaikan.
.daftar-cabang {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}auto-fill dan auto-fit
Sebagai pengganti angka, repeat() menerima auto-fill: peramban membuat kolom sebanyak yang muat tanpa meluap. Pada wadah selebar 700 piksel dengan kolom minimal 220 piksel dan gap 16 piksel, tiga kolom muat karena 3 × 220 + 2 × 16 = 692, sedangkan empat kolom butuh 928 piksel.
auto-fit bekerja sama seperti auto-fill, kecuali satu hal: setelah item ditempatkan, kolom ulangan yang kosong dilipat. Bedanya baru terlihat saat item lebih sedikit daripada kolom yang muat. Dua kartu di wadah lebar dengan auto-fill tetap selebar satu kolom dan sisa barisnya kosong; dengan auto-fit kolom kosong dilipat, sehingga dua kartu itu melebar mengisi baris.
