# Equal Height Blocks in Rows

Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with \$200 in free credit!

There are plenty of solutions for equal height columns using jQuery (like matchHeight.js). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one.

But what if there is multiple rows of blocks and you only want to increase the heights to match in the current row? This could happen from having different sized thumbnails or different amounts of text in each box.

Stephen Akins posted a neat idea on how to solve this. The idea is largely the same, test the heights of divs and set them to the tallest, but before it does that it measures the top position. From that, it is able to tell which divs belong to which row and only affect divs within that row.

Here is the whole thing. I just tweaked it a little from Stephen’s original to make it a bit more efficient.

// IIFE
(function() {

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array();

function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data(“originalHeight”, (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”)));
el.height(newHeight);
}

function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”));
}

function columnConform() {

// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
\$(‘.blocks’).each(function() {

// “caching”
var \$el = \$(this);

var topPosition = \$el.position().top;

if (currentRowStart != topPosition) {

// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight(\$el); rowDivs.push(\$el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push(\$el); currentTallest = (currentTallest < getOriginalHeight(\$el)) ? (getOriginalHeight(\$el)) : (currentTallest); } }); // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // \$(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks \$(function() { columnConform(); }); })(); `\$('.blocks')` would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.