<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="masonry"> <div class="item"><img src="http://8pic.ir/images/gr1p4a0vj90t1q7mizuk.jpg"></div> <div class="item"><img src="http://webneel.com/daily/sites/default/files/images/daily/07-2013/2-3d-cartoon-elephant-mohamed-abdelfatah.preview.jpg"></div> <div class="item"><img src="http://www.10wallpaper.com/wallpaper/medium/1109/Dolls-Cartoon_character_-_HD_Desktop_Wallpaper_second_Series_medium.jpg"></div> <div class="item"><img src="http://www.plusthings.com/wp-content/uploads/2013/07/Disney-Cartoon-8.jpg"></div> <div class="item"><img src="http://images6.fanpop.com/image/photos/34900000/Minion-Hitman-despicable-me-minions-34992255-2592-1620.jpg"></div> <div class="item"><img src="http://cdn2.hellogiggles.com/wp-content/uploads/2015/02/03/Minions.jpg"></div> <div class="item"><img src="http://static.splashnology.com/articles/Ghibli_fanart_2/spirited_away_haku_by_aksaart.jpg"></div> <div class="item"><img src="http://8pic.ir/images/gr1p4a0vj90t1q7mizuk.jpg"></div> <div class="item"><img src="https://www.wow247.co.uk/wp-content/uploads/2013/03/Up-greatest-animated-movies.jpg"></div> <div class="item"><img src="http://webneel.com/daily/sites/default/files/images/daily/07-2013/2-3d-cartoon-elephant-mohamed-abdelfatah.preview.jpg"></div> <div class="item"><img src="http://www.10wallpaper.com/wallpaper/medium/1109/Dolls-Cartoon_character_-_HD_Desktop_Wallpaper_second_Series_medium.jpg"></div> <div class="item"><img src="http://www.plusthings.com/wp-content/uploads/2013/07/Disney-Cartoon-8.jpg"></div> <div class="item"><img src="http://images6.fanpop.com/image/photos/34900000/Minion-Hitman-despicable-me-minions-34992255-2592-1620.jpg"></div> <div class="item"><img src="http://cdn2.hellogiggles.com/wp-content/uploads/2015/02/03/Minions.jpg"></div> <div class="item"><img src="http://p1.pichost.me/i/59/1831371.jpg"></div> <div class="item"><img src="http://8pic.ir/images/gr1p4a0vj90t1q7mizuk.jpg"></div> <div class="item"><img src="http://th01.deviantart.net/fs71/PRE/f/2013/195/b/f/chihiro_hakuresized_by_chukairi_d6d8vl4_by_chukairi-d6dg8fe.jpg"></div> <div class="item"><img src="https://www.wow247.co.uk/wp-content/uploads/2013/03/Up-greatest-animated-movies.jpg"></div> <div class="item"><img src="http://webneel.com/daily/sites/default/files/images/daily/07-2013/2-3d-cartoon-elephant-mohamed-abdelfatah.preview.jpg"></div> <div class="item"><img src="http://www.10wallpaper.com/wallpaper/medium/1109/Dolls-Cartoon_character_-_HD_Desktop_Wallpaper_second_Series_medium.jpg"></div> <div class="item"><img src="http://p1.pichost.me/i/59/1831371.jpg"></div> <div class="item"><img src="http://th01.deviantart.net/fs71/PRE/f/2013/195/b/f/chihiro_hakuresized_by_chukairi_d6d8vl4_by_chukairi-d6dg8fe.jpg"></div> </div> <br> <br> <p style="padding-top:40px" class="text-center top_spac"> Create by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p>

.masonry { /* Masonry container */ column-count: 4; column-gap: 1em; } .item { /* Masonry bricks or child elements */ background-color: #eee; display: inline-block; margin: 0 0 1em; width: 100%; } body { font: 1em/1.67 'Open Sans', Arial, Sans-serif; margin: 0; background: #e9e9e9; padding:30px; } .wrapper { width: 95%; margin: 3em auto; } .masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; column-count:4; } .item { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 2px 2px 4px 0 #ccc; } .item img{max-width:100%;} @media only screen and (min-width: 400px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } @media only screen and (min-width: 1280px) { .wrapper { width: 1260px; } }