Adding padding to the inside of a container

Question

I have designed a layout using 978px as the grid width, with 12px of grid padding. I've never really understood the purpose of grid padding, to be honest, and now I am even more confused, because I thought the grid padding would apply to the inside of my total width so things don't rest right at the edge of the grid.

For example, my header has a background color of #333. I span the logo section 3 columns, but it doesn't look good because it's right at the edge. If I add 12px of padding to the inside of the header, it messes up my column flow, obviously. I tried adding it to the span-columns mixin, like @include span-columns(3, 12, 12px 0px), but the padding is too wide, and I don't think this would be efficient because I would want it on everything that is on the left and right.

So what is the best way to get padding on the inside of the grid?

Here is a little structure:

page-wrapper (container)
 #page
  header#header
  main
  footer#footer

I tried adding padding to the #page-wrapper and #page divs, but this didn't work.

/***** UPDATE *****/

Here is a screen shot of what I am trying to achieve:

Screenshot

This is the desktop layout, that I want responsive, so the padding effect I would like to be the same throughout layouts. Basically, the grid in the screen shot is a total width of 1002, with 12px on the side, 12- 54px columns, and 11- 30px gutters.

this is a fireworks template, so my 320 page is 8 columns, 27px wide, with 12px gutters, and 10px gutter width. I am starting to think I am designing wrong, as I mentioned before, I don't really understand the point of grid padding.

As you can see, I would like there to be padding on the sides of the container which by default everything rests on the edges.

Here is a code snippet of my set up:

$total-columns  : 8;
$column-width   : 27px;
$gutter-width   : 12px;
$grid-padding   : 10px;
$container-style: fluid;
$full: 747px 12;
$tablet: 747px 12 977px;
$desktop: 978px 12;

#page-wrapper{
@include container;
@include susy-grid-background;
@include at-breakpoint(747px 12 977px){
    @include set-container-width;
    max-width: 747px;
    @include susy-grid-background;
}
@include at-breakpoint(978px 12){
    @include set-container-width;
    max-width: 1002px;
    @include susy-grid-background;
}

Now here is something I did by checking on that other post, and it seems to work, but I am not sure if it is the right way to do it:

#header{
margin-left: -$grid-padding;
margin-right: -$grid-padding;
padding: 0 $grid-padding;
margin-bottom: 1em;
}

More information would be useful. I have some sense what you are trying, and that you aren't getting the result you expect - but I'm not real clear what the result *is* and exactly what you want. Can we see code samples and screenshots, either posted here or linked on gist or codepen or similar? — Miriam Suzanne, Sep 01 '12 at 18:05
thanks for the response, i will definitely add some screen shots, and more info as I have been working on this for a while. I think my issue is very similar to this one: http://stackoverflow.com/questions/11223927/susy-how-to-extend-content-box-to-cover-grid-padding-as-well — Colby Work, Sep 01 '12 at 19:28

score 1 · Answer 1 · answered Sep 02 '12 at 19:44

Your screenshot link is broken, but if I understand right you simply want your outer grid elements to span the grid padding. For that, I use the technique you mentioned, although doing it by hand can be a pain if you want it too many places on the site. Here's a mixin that I've created to handle this kind of "bleed" in a flexible way:

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

The default setting there is to add $grid-padding bleed to the left and right. You can change the size of the bleed, and also the sides that it should apply to. You can apply it like this:

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }

You have a few other strange bits of code. By default, Susy build what I call a magic grid: fluid with a max width. Instead of allowing that to happen by default, you are forcing your grids fully-fluid ($container-style: fluid;), including set-container-width (which would set the max-width if you hadn't turned it off, but is now doing nothing useful for you) and then adding a max-width by hand.

You also mention wanting different column and gutter widths at your different sizes. For that you will want to use with-grid-settings inside your breakpoints. e.g:

@include at-breakpoint($desktop){
  @include with-grid-settings(12,54px,30px,12px) {
    @include set-container-width;
    @include susy-grid-background;
  }
}

yes! that bleed mixin is perfect. thank you! and thanks for the advice on the other code, especially the with-grid-settings. I guess I am mis understanding the set-container-width mixin. i need to go pour over the reference docs some more, but I am slowly gaining some speed with Susy. thanks again. btw, i am not sure why my screenshot was broken. it looks like my post got edited by someone. — Colby Work, Sep 03 '12 at 09:13

Adding padding to the inside of a container

1 Answers1