Biasanya untuk membuat sebuah layout seperti pinterest.com kita menggunakan plugin dari desandro yaitu plugin jQuery masonry.
Namun pada tutorial ini saya akan membuat layout masonry seperti pinterest hanya dengan menggunakan CSS3 saja tanpa melibatkan plugin jquery. Bagaimana caranya ?
Pertama, kita harus mengetahui dan mempelajari dahulu mengenai CSS3 Multiple Columns.
CSS3 Multiple Columns memiliki beberapa properti, disini saya akan menggunakan beberapa properti, antara lain :
- column-count
- column-gap
- Dalam properti column-count dengan value 3 yang ditulis dalam script menunjukan bahwa layout akan menampilkan 3 columns.
- Dalam properti column-gap dengan value 15px yang ditulis dalam script menunjukan jarak antara columns adalah 15px.
Untuk lebih lengkapnya silahkan pelajari CSS3 Multiple Columns disini .
Setelah mempelajari CSS3 Multiple Columns, mari kita membahas apa yang menjadi tujuan utama kita, membuat halaman seperti pinterest.
Berikut script HTML yang kita buat :
Kemudian CSS yang kita buat sebagai berikut :
CSS bagian pembuatan container
CSS bagian pembuatan columns
CSS bagian boxed
Lihat demo disini atau download script disini.
Hi thanks masih semangat untuk menulis,
Wih mantap gan,, kalo pake Bootstrap bisa sih, tapi kalau tinggi konten nya beda-beda bakalan berantakan,, makasih banyak gan ^_^
Vroh coba update lagi supaya responsive :D #good
Min, ini buat pake aplikasi apa? trima kaasih
Ini, keren bangetttt… tapi masih ga ngerti CSS but ini bisa kn yah untuk wordpress ?
pemahaman css3 sulit sekali kita dapat di sini lengkap.. tapi apakah ada detail dari awal..?
ini yang dicari, ternyata ketemunya disini… Trick yang menarik boleh dicoba nih, kalo jquery, jquery plugin mansory yah namanya ^_^
Kalau versi responsivenya gimana yah biar si li itu pindah sendiri, atau di definisikan per media screen si gap nya yah ??
keren mas layout masonry nya , pas banget ini kesukaan saya , yang simple simple , thanks ya mas