Merapihkan Tampilan Grid Dengan Masonry Grid Layout

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/17/2015

Jika Anda rajin mengunjungi Pinterest, tentunya sudah tidak asing melihat tampilan grid yang rapih walaupun tinggi tiap post berbeda.

Nah, Jika tampilan blog Anda juga mengadopsi tampilan grid, ada baiknya jika memanfaatkan Masonry grid layout.

Dengan Masonry Library yang dikembangkan oleh David DeSandro, tampilan grid akan lebih rapih.


Yang dilakukan oleh jQuery Masonry adalah mengatur tata letak grid yang memiliki tinggi berbeda dengan mengatur elemen vertikal untuk mengisi ruang kosong vertikal di antara grid yang memiliki tinggi yang tidak sama.


Jika terdapat grid yang tidak memiliki tinggi yang sama, maka pada baris selanjutnya akan terdapat ruang kosong. Nah Masonry akan membuat grid di bawah ruang kosong tersebut menjadi naik untuk mengisi ruang kosong tersebut.


Untuk menerapkannya pada tampilan grid blog yang tiap grid-nya memiliki tinggi yang tidak sama, silahkan coba simpan kode di bawah ini di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js\"></scr" + "ipt>");

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

var elem = document.querySelector('.main');

var msnry = new Masonry( elem, {

  // options

  itemSelector: '.post'

});

//]]>

  </script>

Contoh Grid Homepage Blog Dengan Masonry