GridLesson 315Preview gratis
Column Cards
Lesson ini bagian dari How To · Semua level
Ringkasan
Column cards adalah kartu-kartu konten yang disusun dalam beberapa kolom vertikal, mirip tata letak majalah. CSS multi-column (column-count atau columns) dapat mengalirkan kartu ke kolom berikutnya secara otomatis. Untuk kartu yang tidak boleh terpotong, gunakan break-inside: avoid dan beri jarak dengan column-gap.
Poin kunci
- column-count menentukan jumlah kolom, sedangkan columns dapat mengatur jumlah dan lebar sekaligus
- break-inside: avoid mencegah kartu terbelah di antara kolom
- column-gap mengatur jarak antarkolom
- Kartu dengan tinggi berbeda akan mengalir mengisi kolom
- Pada layar kecil, kurangi jumlah kolom atau gunakan satu kolom
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.