Merapihkan Tampilan Grid Dengan Masonry Grid Layout

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

Semoga bermanfaat...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments