Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa ia tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan memakai media queries untuk mengurangi jumlah kolom pada ketika ukuran layar peramban menyempit. Padahal kalau kita sudah memilih lebar masing-masing item dengan ukuran yang sama, kita dapat memakai column-width untuk memilih lebar kolom tetap tanpa harus melibatkan media queries untuk mengurangi jumlah kolom pada ketika ukuran layar semakin sempit. column-width akan membuat kolom-kolom dengan jumlah yang dapat beradaptasi menurut ruang yang tersisa. Sudah tertulis dengan terang dalam spesifikasi:
.container { column-width:150px; column-gap:5px; /* Margin kanan/kiri antarkolom */ } img { display:block; width:100%; height:auto; margin:0 0 5px 0; /* Margin bawah antargambar */ }Item Bukan Gambar
Ada satu hal yang harus diperhatikan kalau Anda ingin membuat efek/tata letak menyerupai ini pada elemen yang bukan merupakan gambar, yaitu deklarasi display berupa inline-block. Mendeklarasikan perintah ini akan mencegah perpotongan yang tak terduga pada masing-masing item alasannya yaitu CSS3 Kolom secara normal akan berusaha untuk membuat masing-masing kolom menjadi sama tinggi. Beberapa harus terpaksa dipotong di bab bawah mengingat properti CSS ini memang bersama-sama berbasis teks:
.container { column-width:150px; column-gap:5px; /* Margin kanan/kiri antarkolom */ } .item { display:inline-block; /* Mencegah pemotongan item yang tak terduga */ margin:0 0 5px 0; /* Margin bawah antaritem */ padding:10px; background-color:black; color:white; }Ini yang Saya maksud sebagai perpotongan yang tidak diduga dan tidak dikehendaki:
Tidak tahu apa itu Masonry?