Demo 1 : Tampilan Gambar Grid Masonry Responsive
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpm_uPajaGsBxO-qjEeNWXi4w-BqwSt_6kdvZW9jbuMzHUnfosy8QTuUqlSL9XzoeQfX0dronrX3DVXojnVUcH5Y7uCltoub-4dvk3aI42W5TXrJQGdlOjQsvC1IoH_0AtfhRbjyu87I/s1600/Cafe+Racer+Moto+Guzzi-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3ki7bX4rA9RUTh4YSzVsNuZ20WFtLL64h3YcsrINUKLx-Dw92EXTFOD-PGq3qZbDnGrJIRjX3_1gX9v5QWBD_z6wa-7BcdJaYQ_vmcFtfo3oAh0KASVfpEi2XapIdDDQalRgxuAZ37Y/s1600/ducati+1-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZG3z5_mW4GQYsWSBhUnalRbddCcj-AsPfm2qVgW1qVOMiqmiaFb7eHP7eiPP5zzXd0oJDoM0lqg2tMcxkfNeNRPM_C0Ca9F8co1WtndHg_cjbaDG-s5-9UGb4lBSG3Wh3ZyN8z8y268/s1600/ducati+2-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlz9iEbJ52g487SsHTEGsn-vbjAK-Dgb9SYIsR3-Xhs26OJL9NTAtv_kH9d3z_OVTZIhduyUTeIfWlQspzf1O1muHKNONId0PEKQ78ViJvZ21qY1MWeDh2Lm6Evv9i3fABZVWUwmPpY6M/s1600/Ducati+848+by+Apogee+Motorworks-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeaqROs-zEr_sFfL1BGDLnfeQheecsmpco7QYnX8y3BZUM_6YR3YnNuBmX1QGIfJ9nlfPYcHDWbzV5agskOMncgYn6FNKRm_zxb2sXXwqrgzQMzBs_vCfEuF0y61khcl8EFHBso6dieps/s1600/Honda+CB+cafe+racer-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSev7mXdx3DR91P0QZ2ygZkNecg3Om4AxWB13rtdO-5DUTzC1ej9U9D3wsy307h_-_z-DGEm18W4kOjHYa3kdIkHC6JWdG2UwmrKXjpidEjan3hL6H043WeCNVZGTxpnWWceFcYi62EVY/s1600/Honda+GL500+Cafe+Racer-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUltdcin2CjjkwQhpiRZ9dpwDF_VfZj1MivO5mCEuOLAZ6YbYODldvXHyDWghqoG7_H5HvOeH62oYYJfLTwgqydC1VBAdrgNDzBMcndA0OrHw0ckAxY0GqFLYIEWcOxVtwOXzznj9QLy4/s1600/Honda+Hero+Karizma+Cafe+Racer-min.jpg)
Demo 2 : Tampilan Gambar Grid Masonry Responsive
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpm_uPajaGsBxO-qjEeNWXi4w-BqwSt_6kdvZW9jbuMzHUnfosy8QTuUqlSL9XzoeQfX0dronrX3DVXojnVUcH5Y7uCltoub-4dvk3aI42W5TXrJQGdlOjQsvC1IoH_0AtfhRbjyu87I/s1600/Cafe+Racer+Moto+Guzzi-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3ki7bX4rA9RUTh4YSzVsNuZ20WFtLL64h3YcsrINUKLx-Dw92EXTFOD-PGq3qZbDnGrJIRjX3_1gX9v5QWBD_z6wa-7BcdJaYQ_vmcFtfo3oAh0KASVfpEi2XapIdDDQalRgxuAZ37Y/s1600/ducati+1-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZG3z5_mW4GQYsWSBhUnalRbddCcj-AsPfm2qVgW1qVOMiqmiaFb7eHP7eiPP5zzXd0oJDoM0lqg2tMcxkfNeNRPM_C0Ca9F8co1WtndHg_cjbaDG-s5-9UGb4lBSG3Wh3ZyN8z8y268/s1600/ducati+2-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlz9iEbJ52g487SsHTEGsn-vbjAK-Dgb9SYIsR3-Xhs26OJL9NTAtv_kH9d3z_OVTZIhduyUTeIfWlQspzf1O1muHKNONId0PEKQ78ViJvZ21qY1MWeDh2Lm6Evv9i3fABZVWUwmPpY6M/s1600/Ducati+848+by+Apogee+Motorworks-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeaqROs-zEr_sFfL1BGDLnfeQheecsmpco7QYnX8y3BZUM_6YR3YnNuBmX1QGIfJ9nlfPYcHDWbzV5agskOMncgYn6FNKRm_zxb2sXXwqrgzQMzBs_vCfEuF0y61khcl8EFHBso6dieps/s1600/Honda+CB+cafe+racer-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSev7mXdx3DR91P0QZ2ygZkNecg3Om4AxWB13rtdO-5DUTzC1ej9U9D3wsy307h_-_z-DGEm18W4kOjHYa3kdIkHC6JWdG2UwmrKXjpidEjan3hL6H043WeCNVZGTxpnWWceFcYi62EVY/s1600/Honda+GL500+Cafe+Racer-min.jpg)
![Membuat Tampilan Gambar Grid Masonry Responsive Membuat Tampilan Gambar Grid Masonry Responsive](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUltdcin2CjjkwQhpiRZ9dpwDF_VfZj1MivO5mCEuOLAZ6YbYODldvXHyDWghqoG7_H5HvOeH62oYYJfLTwgqydC1VBAdrgNDzBMcndA0OrHw0ckAxY0GqFLYIEWcOxVtwOXzznj9QLy4/s1600/Honda+Hero+Karizma+Cafe+Racer-min.jpg)
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>
- Copy kode CSS tersebut diatas di postingan pakai mode HTML ( cara copy kode diatas : blok kode CSS kemudian tekan Ctrl+C )
- Ganti alt="#"dan title="#" dengan alt tag dan title tag gambar Anda agar SEO Friendly.
- Ganti url gambar 1 dan seterusnya dengan dengan alamat url gambar postingan Anda.
- Bila ingin menambahkan gambar atau mengurangi gambar tinggal ditambah atau dihapus pada kode <img alt="#" src="url gambar" title="#" />
Selamat mecoba dan berkreasi.