MatchHeight.js is a neat jQuery plugin that can be used to fix the height of elements on a page.
In this tutorial I will use the plugin to ensure all of titles on the page maintain an equal height, providing consistent spacing and improving readability.
Let’s say we have a list of movie titles, descriptions and dates shown in a row of columns on a page. Typically, stacking each of these elements would result in the content appearing directly underneath each other.
However, that can cause usability issues for the reader.
Sure, reading vertically through each title, description and date is not an issue, but, the reality is that most users will not read the content throughly, they in fact first read horizontally - scanning quickly from left to right, looking for sub headings and critical information following an F-Shaped Pattern, only after finding something of interest do they read vertically.
By simply equalling the height of the titles, and the descriptions we are able to align each of the elements onto a horizontal grid - this additional whitespace improves consistency and now our users can easily scan through the content.
jQuery is required so make sure that is included first.
Build your page layout, in our case we will use three columns in a row. Each column contains a
.label element. We will use flexbox and calc to create the column layout and make it responsive.
Now add some element styling:
Trigger the MatchHeight.js plugin with a script that runs on page load:
This script will look for the all elements with the
.match class, find the tallest and resize all others to equal it. You will see that we added this to class to our
Now that the MatchHeight plugin has been triggered on the page we can make it also resize our
.description elements - we do this using the
data-mh="group-name" attribute. This attribute will group all elements with the same ‘group-name’, check for the tallest and resize the rest to match.
Note that there is no need to apply the
.match class on any other elements - just use the data attribute like this example:
Now we have a page with 3 columns with 3 equal height titles and 3 equal height description.
Check out the pen below for the full code.
Building a robust and responsive framework that equally sets the height for arbitrary content in pure CSS is difficult, it can partly be done using flexbox. MatchHeight.js is a fast and browser compatible way to do it without hacks or trickery.
How to style Gantt charts with Google and CSS.
Using MatchHeight.js to dynamically set the height of selected page elements exactly.
A lot of gret styleguide methods are available, but I wanted to try something that was easy, fast and static!