eqheights

Give all elements in a group of elements at least the height of the tallest element of the group.

Install

Find eqheights on npm

npm i eqheights

Usage Examples

Simplest, one off:

import eqheights from 'eqheights';
 
// using a selector string
eqheights('.grid-items');
 
// or using a NodeList
const elements = document.querySelectorAll('.list-items');
 
eqheights(elements);

Responsive:

import eqheights from 'eqheights';
 
const gridEqualizer = eqheights('.grid-items');
window.addEventListener('resize', gridEqualizer.recalc);

Togglable:

import eqheights from 'eqheights';
 
// autorun = false because we
// want to initialize only,
// not run eqheights yet
const {recalc, clear} = eqheights('.grid-items', {autorun: false});
 
const container = document.getElementById('grid');
document
  .getElementById('toggle')
  .addEventListener('click', () => {
    Array.prototype.indexOf(container.classList, 'active') < 0
      ? recalc()
      : clear();
 
    container.classList.toggle('active');
  });

Togglable and Responsive:

See this codepen: http://codepen.io/Maximilianos/pen/OyBYvv?editors=001

License

MIT © Max GJ Panas