Tiny Grid Masonry Pure JavaScript Library For Web

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

The term Masonry layout probably owes its name to the popular Masonry plugin that is used to generate this type of layout. Masonry layout is also referred to as the Pinterest Style Layout, as www.pinterest.com was the first major website to use this layout style. You can check out aishikaty/tiny-masonry at GitHub also.

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

Features:

1.) No JQuery File Added.
2.) JavaScript File Added.
3.) No Extra CSS Added.
4.) Simple And Fast Loading Script CDN Files.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

Snippet:

<style>.gridItem{width:50%;}</style>
<div class="grid">
<div class="gridItem"><img src="https://unsplash.it/400/239?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/483?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/559?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/321?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/446?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/356?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/433?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/590?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/246?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/394?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/563?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/502?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/259?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/382?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/447?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/246?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/394?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/563?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/502?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/259?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/382?random"></div>
<div class="gridItem"><img src="https://unsplash.it/400/447?random"></div>
</div>
<script src="https://rawgit.com/aishikaty/tiny-masonry/gh-pages/tiny-masonry.js"></script>
<script>
var grid = document.querySelector(".grid");
new TinyMasonry(grid);
</script>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…