Pure JavaScript Library For Equal Height Block Elements – AlignJS

Category: Javascript , Layout | September 9, 2015
Author: jacksonv1lle
Views Total: 2,035
Official Page: Go to website
Last Update: September 9, 2015
License: MIT


Pure JavaScript Library For Equal Height Block Elements – AlignJS


AlignJS is a pure JavaScript library for aligning the heights of a set of elements to help make a neat, clean web layout.


  • Works with responsive grid layout.
  • Takes CSS3 box-sizing into account.
  • Customizable.

How to use it:

Include the JavaScript file Align.js on your webpage where needed.

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

Initialize the AlighJS.

var container = document.querySelector('.container');

var align = new Align(container,{
    targetClass: 'item',
    threshold: 1

Customization options.

// the class of the items you want to size

// determines the minimum size of which an element must be in order to be sized relative to the larger adjacent element.
threshold: 1,

// executed before the elements are sized

// executed after the elements are sized

API methods.

// updates an instance of AlignJS.

// removes an instance of AlignJS.

You Might Be Interested In:

Leave a Reply