NiceSnippets.com
Full Responsive Pure CSS Masonry Grid Gallery
We are giving you example of fully responsive and pure css masonry grid gallery. In this gallery gride design you can set any size of image it will mane automatically. this is demo of gallery design usign html and css. this masonry design you can also use in div. we are display 4 image in single row.
We allows to free snippets of masonry image gallery , you can download full code of masonry layout css layout. Here in this post i will give you example of css masonry left to right snippet and you will get simple code of html, css and jquery. In masonry gallery demo snippet i give you three tab with html, css and js, you can easily get code of bootstrap masonry gallery with lightbox layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<article>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images2m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images1m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images3m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images4m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images5m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images6m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images12m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images13m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images14m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images15m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images16m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images17m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images18m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images19m.jpg">
</div>
</section>
<section>
<div class="images">
<img src="//nicesnippets.com/demo/images20m.jpg">
</div>
</section>
</article>
</body>
</html>
body {
padding:10px;
}
article {
columns: 4;
}
section {
margin-bottom: 15px;
}
.images img{
width: 100%;
box-shadow: 0px 0px 5px 0px #5a5a5a;
}
