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 ?

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 dalamscript 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s