Grow your CSS skills. Land your dream job.

Correct method for grid system gutters?

  • # January 22, 2013 at 10:00 am

    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.

    # January 22, 2013 at 10:07 am

    Use `margin` instead of `padding`. That is also what most grid systems use.

    # January 22, 2013 at 10:08 am

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

    # January 22, 2013 at 10:12 am

    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.

    # January 22, 2013 at 10:35 am

    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:

    http://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.

    # January 22, 2013 at 10:40 am

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".