Skip to main content
KOMPI AJAIB

follow us

Mau memiliki tema blog seperti tema blog Kompi Ajaib ini? Silahkan baca postingan ini ➜ Template Kompi Ajaib AMP V3
Tambahkan aplikasi Kompi Ajaib di smartphone tanpa install, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

×

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:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar