ImagesLesson 62Preview gratis
Image Grid
Lesson ini bagian dari How To · Semua level
Ringkasan
Image grid menyusun beberapa gambar dalam baris dan kolom yang teratur sehingga galeri terlihat rapi. CSS Grid memudahkan penentuan jumlah kolom, jarak, dan ukuran gambar. Efek hover halus dapat ditambahkan untuk memberi umpan balik saat pengguna mengarahkan kursor.
Poin kunci
- display: grid mengaktifkan tata letak grid dua dimensi.
- grid-template-columns: repeat(3, 1fr) membuat tiga kolom sama lebar.
- gap mengatur jarak antarsel gambar.
- object-fit: cover menjaga proporsi gambar di dalam sel.
- Media query dapat mengurangi jumlah kolom pada layar kecil.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.