Create Masonry Grid Layout With Vanilla JavaScript – Gridify

Preview:

Description:

Gridify is a vanilla JavaScript layout plugin used to arrange your grid items in a Masonry-style layout using pure JavaScript.

How to use it:

Insert your items to the grid layout and specify the number of columns in the 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>

Load the minified version of the Gridify library at the end of the document.

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

Initialize the Gridify.

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

Set the width of the grid items.

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

Append more element(s) to the grid layout. Ideal for infinite scroll.

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

More PAI methods.

// re-init the layout
gridify.reInit();
// destroy the layout
gridify.destroy();