ImagesLesson 61Preview gratis
Responsive Image Grid
Lesson ini bagian dari How To · Semua level
Ringkasan
Responsive image grid menata banyak gambar dalam kolom yang menyesuaikan lebar layar. CSS Grid dengan repeat(auto-fit, minmax(...)) dapat menambah atau mengurangi kolom secara otomatis tanpa banyak media query. object-fit dan aspect-ratio menjaga setiap gambar tetap rapi dalam selnya.
Poin kunci
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) membuat kolom fleksibel.
- gap memberi jarak konsisten antargambar.
- object-fit: cover mencegah gambar gepeng saat sel berubah ukuran.
- aspect-ratio menjaga tinggi gambar proporsional.
- minmax menetapkan lebar minimum dan maksimum kolom.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.