Membuat Tampilan Gambar Grid Masonry Responsive

Cara mudah membuat gambar  tampil Grid Masonry Responsive. Saat membuat posting blog terkadang ingin menampilkan beberapa gambar dalam satu halaman postingan, karena ukuran gambar tidak sama maka tampilannya-pun kurang enak dilihat. Bila ingin menampilkan beberapa gambar dalam postingan ataupun di widget sidebar disesuaikan ukuran lebar dan tinggi gambar, berikut caranya, Hanya dengan penggunaan CSS Anda dapat membuat tampilan gambar grid masonry responsive tanpa javascript ataupun jquery.

Demo 1 : Tampilan Gambar Grid Masonry Responsive

Demo 2 : Tampilan Gambar Grid Masonry Responsive

Kode CSS Membuat Tampilan Gambar Grid Masonry Responsive

<div class="duipee-img">
<img alt="#" src="url gambar 1" title="#" />
<img alt="#" src="url gambar 2" title="#" />
<img alt="#" src="url gambar 3" title="#" />
<img alt="#" src="url gambar 4" title="#" />
<img alt="#" src="url gambar 5" title="#" />
<img alt="#" src="url gambar 6" title="#" />
<img alt="#" src="url gambar 7" title="#" />
</div>
<style type="text/css">
.duipee-img { -webkit-column-width:200px; -moz-column-width:200px;column-width:200px;
-webkit-column-gap:5px; -moz-column-gap:5px;column-gap:5px;}
.img {display:block;width:100%;height:auto;background-color:silver;margin:0 0 5px 0;}
</style>

1. Copy kode CSS tersebut diatas di postingan pakai mode HTML ( cara copy kode diatas : blok kode CSS kemudian tekan Ctrl+C )
2. Ganti alt="#"dan title="#" dengan alt tag dan title tag gambar Anda agar SEO Friendly.
3. Ganti  url gambar 1 dan seterusnya dengan dengan alamat url gambar postingan Anda.
4. Bila ingin menambahkan gambar atau mengurangi gambar tinggal ditambah atau dihapus pada kode <img alt="#" src="url gambar" title="#" />

Untuk lebar gambar ( 200px ) dapat Anda rubah sesuaikan dengan lebar halaman postingan Anda. Anda bisa bandingkan demo gambar diatas : Demo 1 = 200px dan Demo 2 = 150px
Selamat mecoba dan berkreasi.

Share this: