In web development, there are standards and then there are some things that you can do just to make your site look a little nicer. Matching row heights is one thing that will make your site look less sloppy and more professional. Surprisingly it’s not that hard to do!
MatchHeight.js is a jQuery library you can include on your project. Once you have added the file and called the file to be run on your page, all you need to do is call the function on the items you want to match the height. For instance, if you want four objects in a row with the same class to be the same height, you would call the function like this:
You can also match the heights between multiple objects by calling them in a comma-separated list, which is really handy. You could do something like:
Zurb Foundation is a css/scss framework similar to the Bootstrap framework. They have built-in functionality that essentially does this called Equalizer. One way to use this, you will need the ability to add a data-attribute to your markup. The container around the elements you want to match heights will need the attribute “data-equalizer” and each child element you want to match heights will get the attribute “data-equalizer-watch”. The child elements will all be resized to the same height. You can also specify which media query to match heights on based on Foundation’s built-in grid system. You will just add the attribute
‘data-equalize-on=”medium’” or small, large, etc. This will make sure the equalizer is only run on that screen size.
Var elem = new Foundation.Equalizer(element, options);
Where “element” would be the object to add the trigger to and “options” overrides to the default plugin settings. More information on the different plugins and methods that can be used alongside equalizer, can be accessed here.
Flexbox is a css layout mode that is very versatile and can help with a lot of things. Thankfully browser support is finally catching up and it can be used on most projects. By default, flexbox will match the heights of the child elements of the container that flex is declared on. To initiate flexbox, you would call
display:flex; on your wrapper and each of the 1st child elements will have matched heights. It’s as easy as that!