Correct method for grid system gutters?

[Secur3]

I’m moving over to Responsive Design and testing Foundation 3 on a website. I haven’t used grid systems much and would like to know how best to achieve gutters.

My test site here [http://diskbacker.com](http://diskbacker.com “Diskbacker”) shows the issue I need to resolve.

I have the content div and sidebar div highlighted with background colors to show what is going on. They touch each other by default. In the final design I’d like to add background colors to these but with a gutter in between.

How do I add some separation between the content div and the sidebar div? Adding a padding-right value to #content only pads the text.

Thanks in advance.

[Paulie_D]

I looks as though it’s not designed to have gutters without reducing the number of columns in one of the divs.

[Paulie_D]

What you might consider is removing the background colours from the #content div and adding it to the .post-box div.

Alternatively, do the same for #sidebar and add it to .sidebar-box.

Then it’s just a matter of playing with the padding on the content.

[Secur3]

Thanks. Adding a margin requires a resize of the div as it pushes the sidebar down, that’s why I thought of outside gutters.

I did read this but I’m not sure whether it would integrate into the Foundation design well:

https://css-tricks.com/dont-overthink-it-grids/

I’ve tried your method too Paulie_D and this doesn’t seem to break anything, so may be the way forward.
Does it follow that this would be the best method to keep the maximum screen width as it drops down onto smaller devices? I’m thinking of smartphones which are already tight for space.

[Paulie_D]

I don’t know much (anything) about Foundation 3 but it looks to be % based so I think it should be fine. Certainly the test page is responsive.

You can always adjust any styling issues in your media queries.

[Author]

Posts