Masonry Grid Layout With Vanilla JavaScript - Gridify.js

Masonry Grid Layout With Vanilla JavaScript
Masonry Grid Layout With Vanilla JavaScript

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

How to use it

1. Insert your items to the grid layout and specify the number of columns in the data-gridify attribute.

Item 1
Item 2
Item 3
Item 4
Item 5

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

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

3. Initialize the Gridify.

window.onload = function() {

4. Set the width of the grid items.

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

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


6. More PAI methods.

// re-init the layout

// destroy the layout

Live Demo

See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post