One of the most common problems in front-end development is when you have a responsive grid and all of the columns need to be of equal height, with varied amounts of content within each column. You may have for example a grid of portfolio items with a full bleed background or blog posts with a title and excerpt. Either way, as soon as you hand over the CMS to your client and they start replacing your perfect fixed length placeholder copy, the columns have varying heights and no longer align.

Of course, in the perfect world where every user has the latest browser with all the bells and whistles, we could utilise some of the great features that the CSS Flexible Box Layout Module has to offer, and to be fair cross browser support is now pretty decent for it too! However we can’t neglect our common foe Internet Explorer, as prior to IE11, support is non existent. Also you may be using an existing grid system, which for the most part serves its purpose well.

A typical grid with varying amounts of content

The issue here is that each grid item has a grey background colour applied to it, so of course different content lengths will look odd, also the grid layout will eventually break as floats are never cleared as the items flow.

HTML Grid

Grid HTML markup

In this example we are using the Bootstrap Grid System to display a grid of text callouts. The grid could be fixed by either chucking in a closing .row div and opening a new one, or by clearing the floats for every 2nd or 3rd iteration, depending on the media query breakpoint. However closing the grid row won’t work when a different breakpoint kicks in and the units per row change to an odd number, you also still have the design issue of the background colour fill highlighting the inconstancy.

Javascript function to align the height of the elements

So, to really handle this in a robust and cross browser compliant way we need to fallback to a javascript solution. The function below will accept a collection of DOM objects (our grid content elements), and perfectly align them..

The alignment function iterates over the collection, measuring the height of each element and then sets the height of all of the elements based on the tallest in the collection, you can set an offset to add on to the calculated height if you wanted to do so for any reason. Additionally there’s also a callback baked in, so you can run some other code once the alignment is complete; some form of graceful transition for example.

Usage

You can see from the code above that we simply pass the alignment function a selector, targeting the group of grid columns. We call it first when the document is ready and then wrap the call in a resize event listener so that the elements can be realigned when the content reflows.

Content containing images

One problem you may encounter is when the content contains images, as the height of a grid column will change from when its height is initially measured to when an image inside the column has fully loaded. Thankfully this can easily be resolved by detecting when the images have finished loading and then calling the alignment function, using a library such as imagesLoaded by David DeSandro.

Content using non system webfonts

If you are using non system web fonts, either hosted locally or loaded via a cdn, then this can also skew the initial element height calculation; most notably in Safari. As yet there isn’t a particularly robost way to detect if fonts have loaded, therefore using $(window).load will ensure that fonts, and everything else for that matter, will have finished loading before the first call to the alignment script.

 

Article

LEAVE A COMMENT

Notify of
avatar
wpDiscuz