Responsive grid with columns of same height

Question

I'm struggling with what should be a simple layout problem

I have a layout with 4 headline boxes. The 4 boxes need to be the same height when 4 across ("deskop" view). They also need to be the same height when 2 across ("tablet" view). When full width ("mobile" view), the height's don't matter.

I've setup a Fiddle to show what I currently have & what happens when it responds.

https://jsfiddle.net/c5oumq2z/

The

<div class="report_v3_summary_box">

is to add a background color to the content and to add the margin when the columns respond.

Does anyone have any advice please?

Thanks

Answer 1

You have two options in my view: CSS or JS.

With JS you can use a jquery library like matchheight.

With CSS, preferred method, you can use flexbox property to get desired effect. Here's a really nice guide to flexbox. Here's an example (at the bottom).

What you basically need is (on the parent container, which is the row in your case):

flex-wrap: wrap;
display: flex;

Then, on .report_v3_summary_box:

height: 100%;

And move the margin bottom to the: .col.l3.m6.s12.