GridLesson 312Preview gratis
Expanding Grid
Lesson ini bagian dari How To · Semua level
Ringkasan
Expanding grid adalah kumpulan kartu grid yang salah satunya membesar saat dipilih, disentuh, atau diberi fokus. Efek ini memberi ruang untuk detail tambahan tanpa membuka halaman baru. Implementasinya bisa memakai CSS transition dan kelas aktif yang ditambahkan JavaScript, atau manipulasi span kolom dan baris.
Poin kunci
- Setiap kartu dapat diberi kelas aktif saat diklik atau difokuskan
- Perbesar kartu dengan grid-column dan grid-row span atau transform scale
- Gunakan transition agar perubahan ukuran terasa halus
- Sediakan dukungan keyboard melalui elemen button dan :focus-visible
- Batasi jumlah kartu yang terbuka agar tata letak tidak kacau
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.