Masonry Grid Layout With Vanilla JavaScript - Gridify.js

byAdmin -January 18, 2023

0

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() {
  gridify.init();
};

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.

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

6. More PAI methods.

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

// destroy the layout
gridify.destroy();

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