Selamat Datang

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





Penulis :

Hello, I’m UI/UX Designer & Front-end Developer View all posts by agilbaka

Comments

7 thoughts on “Cara Membuat Layout Masonry Dengan CSS3

  1. Freddy says:

    Hi thanks masih semangat untuk menulis,

  2. Wih mantap gan,, kalo pake Bootstrap bisa sih, tapi kalau tinggi konten nya beda-beda bakalan berantakan,, makasih banyak gan ^_^

  3. Nasir says:

    Vroh coba update lagi supaya responsive :D #good

  4. Newbie says:

    Min, ini buat pake aplikasi apa? trima kaasih

  5. rista says:

    Ini, keren bangetttt… tapi masih ga ngerti CSS but ini bisa kn yah untuk wordpress ?

  6. satria says:

    pemahaman css3 sulit sekali kita dapat di sini lengkap.. tapi apakah ada detail dari awal..?

  7. ini yang dicari, ternyata ketemunya disini… Trick yang menarik boleh dicoba nih, kalo jquery, jquery plugin mansory yah namanya ^_^

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development