tiny-masonry

Tiny masonry grid in vanilla JavaScript. http://www.cssscript.com/tiny-masonry-like-javascript-grid-library-tiny-masonry-js/

tiny-masonry.js is a minimalist JavaScript library that makes it easy to create Masonry-like responsive, neat, fluid grid layout for your web project.

Just include the tiny.masonry.js script on the webpage and you’re ready to go.

<script src="tiny-masonry.min.js"></script>

Add your items to the grid.

<div class="grid">
  <div class"gridItem">Item 1</div>
  <div class"gridItem">Item 2</div>
  <div class"gridItem">Item 3</div>
  <div class"gridItem">Item 4</div>
  ...
</div>

Set the width of the grid items.

.gridItem {
  width: 50%;
}

Initialize the grid.

var grid = document.querySelector(".grid")
new TinyMasonry(grid)