Apa itu masonry layout? masonry layout adalah sistem grid dengan kolom yang memiliki baris dan tinggi yang tidak tetap, biasanya masonry ini di buat menggunakan plugin jquery masonry tetapi sekarang css3 sudah bisa digunakan untuk membuat layout masonry.
Yang harus anda pelajari hanya css3 multiple columns:
- column-count:
- column-gap:
Keterangan:
- column-count: untuk memberi banyak kolom
- column-gap: untuk memberi jarak antara kolom
Example:
div {
column-count:4;
column-grap:10px;
}Hasilnya adalah Empat Kolom dengan margin atau jarak setiap kolom adalah 10px
Untuk contoh lainnya bisa dilihat dibawah ini:
HTML
<div class="item-konten">
<ul>
<div class="isi">
<li><img ="#" /></li>
<li>Dekripsi yang disini</li>
</div>
</ul>
</div>
CSS
.item-konten {
padding:20px;
}
ul {
column-count:3;
column-grap:10px;
border:1px solid #333;
}Sekian tutorial singkat yang dapat saya sampaikan, jika ada kekuranngan mohon kritik di kolom komentar.