Namun pada tutorial ini saya akan membuat layout masonry seperti pinterest hanya dengan menggunakan CSS3 saja tanpa melibatkan plugin jquery. Bagaimana caranya ?
masonry css only
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 :
<div class="container">



<ul class="content-columns">



 <li> <!-- list dari artikel yang dibuat artikel-->

<article class="boxed">
    <img src="" alt=""> <!-- gambar artikel -->



<div class="description">



<h1>...</h1>


<!-- untuk judul artikel-->
     
...
<!-- untuk keterangan singkat artikel-->
</div>



   </article>

</li>






<ul>
</div>
Kemudian CSS yang kita buat sebagai berikut :
CSS bagian pembuatan container 
.container {
 max-width: 1170px;
 padding: 0px 15px;
 margin: 30px auto; 
}
CSS bagian pembuatan columns
.content-columns {
 list-style: none;

 -moz-column-count: 4;
   -webkit-column-count: 4;
   column-count: 4;

   -webkit-column-gap: 15px;
   -moz-column-gap: 15px;
   column-gap: 15px;
}
CSS bagian boxed
.boxed {
 background-color: #ffffff;
 border-radius: 5px;
 border: 1px solid #ddd;
 margin-bottom: 30px;
 overflow: hidden;
  display:inline-block;
 -webkit-column-break-inside:avoid;
 -moz-column-break-inside:avoid;
 column-break-inside:avoid;
}

.boxed img {
 width: 100%;
}

.boxed .description {
 padding: 15px;
 margin-top: 10px;
}

.boxed .description h1 {
 font-size: 16px;
}

.boxed .description p {
 font-size: 14px;
 line-height: 21px;
}

Lihat demo disini atau download script disini.