Equal Height Elements in JavaScript

A lot of the time I find that I need to have several columns or elements match each other in height so that I can use an image background.

This is a simple JavaScript function should be called on load, as well as on any event. In the example below I have included a debounced resize function to adjust the height of the sidebars to match that of the article.

See the Pen eqHeight JS function by Tom Ford (@tomfordweb) on CodePen.

SASS Columns Mixin

I use this SASS mixin for simple column layouts in SASS. While you can write on top of it for specific responsive widths…I find it most effective in galleries, icons, or just simple situations where you need a flexible grid.

Here is an example below, you can adjust resize your browser to simulate different screen sizes but it’s kind of wonky in an iframe. In order to see it really work you need to view the pen or use in your own project where you can resize your browser.

View on codepen.io

See the Pen columnsContainer SASS Mixin Demo by Tom Ford (@tomfordweb) on CodePen.