Cara Membuat Layout Masonry Dengan CSS3 (seperti google card-view, pinterest.com)

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 ?

(layout Masonry) 

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

div {
    column-count: 3;
    column-gap: 15px; 
}

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

Demo
Download source

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email