Tiny Masonry-like JavaScript Grid Library – tiny-masonry.js

Category: Javascript , Layout | August 11, 2016
Author:aishikaty
Views Total:1,995 views
Official Page:Go to website
Last Update:August 11, 2016
License:MIT

Preview:

Tiny Masonry-like JavaScript Grid Library – tiny-masonry.js

Description:

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)

You Might Be Interested In:


Leave a Reply