Cara Membuat Layout Masonry Dengan CSS3

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

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.