Skip to main content

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB