Gridify | Creating Masonry Style Grid Layout with JavaScript

Gridify is a light vanilla JavaScript layout library, it can allow you to create Masonry-style grid layout easily.

How to create grid layout using Gridify?

1.Create a div container to contains some grid item, the div container has data-gridify attribute.

<div data-gridify="4-columns">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  ...
</div>

2.Import gridify.min.js at the end of the docment

<script src="gridify.min.js"></script>

3.Initialize the Gridify when html page has loaded

window.onload = function() {
  gridify.init();
};

3.Set the width, height and other attributes for each grid item using css

.column.size-1of4 {
  width: 25%;
  float: left;
}

4.You aso can use append functions to add more grid items

gridify.appendElements(array);
gridify.appendItem(dom);