Create Masonry Grid Layout With Vanilla JavaScript – Gridify

Category: Javascript , Layout | February 25, 2019
Author: richardhedges
Views Total: 1,763 views
Official Page: Go to website
Last Update: February 25, 2019
License: MIT


Create Masonry Grid Layout With Vanilla JavaScript – Gridify


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>

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() {

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.


More PAI methods.

// re-init the layout

// destroy the layout

You Might Be Interested In:

Leave a Reply