CSS Grid untuk tata letak kartu yang responsif
Buat susunan kartu yang mengikuti ruang layar tanpa banyak breakpoint.
Biarkan ruang menentukan kolom
CSS Grid dapat menyesuaikan jumlah kolom dengan lebar kontainer. Pola berikut memberikan ukuran minimum kartu sambil membagi ruang yang tersisa secara merata.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 24px;
}
Memahami setiap bagian
auto-fit membuat sebanyak mungkin kolom yang muat. minmax memberi batas minimum dan maksimum, sedangkan 1fr membagi ruang sisa. Fungsi min menjaga kartu tetap muat saat kontainer lebih sempit dari 260 piksel.
Jaga struktur semantik
Gunakan elemen artikel untuk kartu mandiri, heading yang berurutan, dan teks tautan yang menjelaskan tujuan. Tampilan responsif harus tetap bisa digunakan dengan keyboard.
Uji dengan konten nyata
Judul panjang dan jumlah kartu ganjil sering mengungkap masalah tata letak. Uji kondisi tersebut bersama tampilan layar kecil sebelum menyelesaikan desain.