Customizable outer grid gutter

[jstoller]

I've added a new variable, $zen-margin-width, that controls the outer margin on the left and right sides of the grid. This variable defaults to half the gutter width, mimicking Zen Grid's current behavior. However, the new variable is able to accept one or two values. If two values are provided, then the first will set the margin on the float direction side of the grid and the second value will set the margin on the reverse side. So, in a default configuration, $zen-margin-width: 20px 50px; would result in a left margin of 20px and a right margin of 50px within the grid container.

To achieve this, I remove the padding from the outside edges of the first and last column in a grid row and instead add the grid margin as padding on the grid container. This has the added benefit of ensuring that the outside columns end on grid boundaries and don't intrude into the margins of the layout. For instance, including the grid margins within the columns themselves makes it very difficult to set a background color for the grid. With this updated feature, I can now easily include an inner wrapper div within my grid container and set the background on that.

[JohnAlbin]

To achieve this, I remove the padding from the outside edges of the first and last column in a grid row and instead add the grid margin as padding on the grid container.

That would make the apparent size of the first and last grid item wider than the other grid items, since they would have less padding then the other grid items.

That breaks the grid, no? That's a no-go as far as this feature. If I've misunderstood something, please explain. Thanks!

With this updated feature, I can now easily include an inner wrapper div within my grid container and set the background on that.

I see no reason why you can't do that now. Well, except that the inner wrapper div would need a clearfix in order to wrap the grid items. But I don't see why you can't skip the wrapper and apply the background to the container itself. Again, that's looks completely independent of this feature.

[jstoller]

That would make the apparent size of the first and last grid item wider than the other grid items, since they would have less padding then the other grid items.

I adjust the width of the first and last grid item as well, to account for the removed padding.

I see no reason why you can't do that now. Well, except that the inner wrapper div would need a clearfix in order to wrap the grid items. But I don't see why you can't skip the wrapper and apply the background to the container itself.

To illustrate the problem, lets take the following HTML:

<div id="main"> <!-- the grid container -->
  <div id="main-inner">
    <article id="content"> <!-- second column in grid -->
      The primary content...
    </article>
    <aside id="sidebar-first"> <!-- first column in grid -->
      First sidebar content...
    </aside>
    <aside id="sidebar-second"> <!-- third column in grid -->
      Second sidebar content...
    </aside>
  </div>
</div>

Now, imagine that I want my main container to show up as a white box on a black background, so I set the body background to black and I set the background of #main to white, as you suggest. However, because the you're using padding on the individual grid items to control the width of the grid margins, this won't work. My white box will extend beyond the content of the grid container to cover the margins of the grid as well. There's no easy way to make the borders of my white box end on the outside grid borders.

By moving the grid margins from padding on the grid items to padding on the grid container, I fix this problem. In this case I'm removing the left padding from #sidebar-first and the right padding from #sidebar-second, but adding left and right padding to #main. I can now set the background of #main-inner to white (with a clearfix). This lets my white box cover just the content of the grid container, ending on the outside grid borders, while maintaining my grid margin around it.

Am I making sense?

I would also suggest that there is a fundamental difference between grid gutters and grid margins. While half the gutter width is a fine default for the grid margins, I can think of many, many cases where I'd want to change that. In fact, I've used plenty of grids where I didn't want any margins at all. The ability to set margins independently from the gutter feels like an important feature to me. The ability to set different left and right margins is not quite as important, but I figured, why not. Most people won't use that, but there are use cases.

[jstoller]

I'm currently merging in all your latest changes, refactoring my code and trying a slightly different approach, which I think should work better for percentage based layouts. It occurred to me that changing the width of grid items to account for the lost padding only works for fixed-width layouts (which I generally prefer). I'm still planning to put padding on the grid container, as I do here, but instead of removing the padding you have on the grid items, I'm hoping to use negative margins to account for this padding on the outer edges.

I'll try to push those changes out soon, for your review.

[magnify]

I am not sure if this is exactly the same problem that I have been struggling with, but is sounds somewhat similar.

In my design I wanted a border above 4 columns with the same width as the columns. As mentioned above I also want the columns to have the same width otherwise I could not use images with a fluid width.

I tried several different solutions, but ended up with :before (you could also add another wrapper instead) and negative margins: http://magnify.dk/test/zen-grid-margin-test.html

Also on git: https://github.com/magnify/stuff

This works for me and my current project, just wanted to mention it, perhaps someone else finds it useful.

Oh and thanks for a great grid system John Albin! :)

[JohnAlbin]

This feature makes a lot more sense once we get #23 in. Moving to 2.0 milestone.