Tiny Pinterest Inspired Responsive Grid Layout In Vanilla JS – Gridify

Preview:

Description:

Gridify is a small vanilla JavaScript plugin used for generating a Pinterest-inspired responsive fluid grid layout (a.k.a Masonry Layout) from a group of items with different width & height.

See also:

• Top 10 JavaScript & CSS Responsive Grid Layouts

How to use it:

Add items (e.g. images) to the grid layout as follows:

<div class="grid">
  <div class="grid--item">
    <img src="img/1.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/2.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/3.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/4.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/5.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/6.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/7.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/8.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/9.jpg" />
  </div>
  <div class="grid--item">
    <img src="img/10.jpg" />
  </div>
</div>

Download and insert the minified version of the Gridify plugin into the html page.

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

Initialize the Gridify plugin and done.

const gridify = new Gridify();

Override the default selectors to fit your needs.

const gridify = new Gridify({
      containerSelector: '.grid',
      itemSelector: '.grid--item',
      columnSelector: '.grid--column'
});

Determine whether or not re-init the plugin when the window resizes.

const gridify = new Gridify({
      resizable: true
});

Event handlers

const container = document.querySelector('.grid');
container.addEventListener('gridify:init', (ev) => {
  // on init
}, false);
container.addEventListener('gridify:resized', (ev) => {
  // on resize
}, false);

Changelog:

02/03/2020

• Updated dependencies, added prettier and code formatted

07/09/2019

• Added events