The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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 []( “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

    This reply has been reported for inappropriate content.

    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:

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed