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.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s