There’s a Jquery plugin that I pull into every Wordpress site I build because I work with graphic designers/UX designers, and they always present the same problem. Here’s my lovely design, and in it there’s a grid of posts, or a blog archive or something. And it looks lovely.

But sure once the client gets their hands on it, that first title on item one will be three lines long, and the whole thing will look bonkers

An unlovely layout

So what’s the solution? You could use Flex or Grid in CSS, but my issue is almost always the varying title lengths. It’s something that clients really zone in on.

Anyway, the plugin I use for this is called Jquery Match Height - simply:

Download or CDN to the plugin and link it on your page after JQuery. If you are using wordpress, enqueue that sucker.

Give the elements you want to match a class. Let’s say “matchy”. So the titles in the blog posts will all be something like This is the long title

Now, call the function after everything on the page loads - so, in your document ready (or in a script tag on your page right before ):

//my matchy functionfunction matchy(){$(".matchy").matchHeight();}//document is ready (vanilla js):document.addEventListener("DOMContentLoaded", function() {//if "matchy" is on the page, run the functionif($('.matchy').length >0){matchy();}