Creating Equal Height Grid In Pure JavaScript – equaldiv

Preview:

Description:

equaldiv is a vanilla JavaScript plugin that equalizes the height of your grid items within the same row.

How to use it:

Download and import the ‘equalDiv.js’ script into the html document.

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

Add the CSS class ‘equalized’ to your grid container:

<div id="content">
 <div class="content-wrap equalized">
 
 <div>
 <span class="equalized-watch"><h1>Header</h1>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</span>
 </div>
 <div>
 <span class="equalized-watch"><h1>Header</h1>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</span>
 </div>
 <div>
 <span class="equalized-watch"><h1>Header</h1>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</span>
 </div>
 ...
 
 </div>
</div>

Initialize the equaldiv and you’re done.

equalDiv({
  containerID: 'content'
});

Set the min height of the grid item.

equalDiv({
  containerID: 'content',
  minHeight: 0
});