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 jikalau memanfaatkan Masonry grid layout.

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


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

Contoh Grid Tanpa Masonry

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

Contoh Grid Dengan Masonry

Untuk menerapkannya pada tampilan grid blog yang tiap grid-nya mempunyai tinggi yang tidak sama, silahkan coba simpan aba-aba di bawah ini di atas aba-aba </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...

Sumber https://www.kompiajaib.com/

Share this post