Feature request – equal height columns for grid view

Asked on March 16, 2016 in Feature Requests.

Hi there,
Just had a quick thought for a feature request. If you are adding columns in a grid layout, would it be possible to make them equal height – this way, you could achieve layouts whereby 1 column can just be a background image and the next column could contain text. Currently, if you just wanted a background image for a column (and nothing else) it would only display if there is content in it.

An example of what I mean is on this site http://lineoutfunctions.com – this is made with layers but I have used some additional classes and css to make the columns with just a background image the same height as its neighbouring column.

What do you think?

Sam Skirrow Power User
Reply
1 Answer(s)
Answered on March 17, 2016.

Hello!

We are releasing a major update very soon that implements flexbox in the grid system. This allows for equal height columns and better support for all column combinations in grid layouts.  To achieve something like you are looking at, where you might have two 6/12 columns where one is only an image and one is content, you need to use the featured image. The reason for this is background images are cosmetic fills on an empty container (in our example) and cannot expand and contract responsively while scaling that background fully the way an image itself can be scaled responsively. If this does not matter and you’re using a pattern or texture, you can give the column a custom class by clicking its advanced button, then set the height in the Custom CSS. This is the tradtional way the browser can understand what the height of an empty element should be – it either needs an explicit height, or it needs content or padding. With our new changes, you can use flexbox to enforce equal height on all columns. This forces all columns to match the height of the tallest column that shares the same row. This will be set automatically, but here is a helpful article that explains how it is done in case you’re interested:
http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Reply