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.

How to use it:

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)