Grid issue: Columns equal height but with gutter/margin between

Question

Hi,

I'm trying to achieve a layout with three columns across the page with equal height and gutter space between each column.

I've tried both the Canvas Grid which gives the gutter I need to achieve. But I then can't get the equal height bit to work. You end up with a variation in the
height of the columns.

If I switch to using the Bootstrap grid I can achieve equal height but lose the gutter between the columns.

Is .common-height class a Bootstrap only bit of code or is there something similar I can apply to the Canvas grid? I tried this with the Canvas Grid but couldn't get it to work.

Can you point me in the right direction?

Thanks,
Nick.

SemiColonWeb · Accepted Answer

Hello, It is still possible to have the Gutters with the Bootstrap Grid. Consider using the following code: This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

agent8design · Answer

Was going to post a link and Jpeg but couldn't see how to do that privately in my first post.

Attached is a Jpeg of the design I'm trying to create.

And here is a link to the test homepage I'm working on with the Bootstrap Grid in place:

http://testpod.co.uk/zok_htmlsite/

Thanks,
Nick.