Equalize The Height Of Columns By Group – Matchbox

Preview:

Description:

Matchbox is a responsive equal height JavaScript library used to make a set of matched html containers have a same height that you’re able to specify the size of groups to process for matches.

How to use it:

First you need to load the Matchbox JavaScript library in the html document.

<script src="matchbox.js"></script>

Assumed that you have a set of boxes as follows:

<div class="group-one js-box-one">
  <div class="item-1 js-match"></div>
  <div class="item-2 js-match"></div>
  <div class="item-3 js-match"></div>
  <div class="item-4 js-match"></div>
  <div class="item-5 js-match"></div>
  <div class="item-6 js-match"></div>
  <div class="item-7 js-match"></div>
  <div class="item-8 js-match"></div>
  <div class="item-9 js-match"></div>
  <div class="item-10 js-match"></div>
</div>

Create a new Matchbox and specify the parent container as follow:

var myMatchbox = new Matchbox({
    parentSelector: '.js-box-one'
});

Initialize the Matchbox.

myMatchbox.init();

Specify the size of groups to process for matches.

var myMatchbox = new Matchbox({
    parentSelector: '.js-box-one',
    groupsOf: 5
});

More configuration options with default values.

// class name set on body on init
initClass: 'js-matchbox-initialized',
// CSS selectors
parentSelector: '.js-box',
childSelector: '.js-match',
// Size of groups to process for matches
groupsOf: 2,
// Array of objects; each object must have a bp and a groupsOf property.
breakpoints: []