Add feature for margin-based gutters with padding-less grid items about zen-grids

[marcvangend]

Yes! I would like to be able to choose between margin and padding to create the gutters. Sometimes I want to add a border around a grid item, but right now (without an additional inner div) the gutters end up inside the border.

[thamas]

Realted issue on do: http://drupal.org/node/1593842

[echozone]

I'm often using background colors for demos, but it would not be worth %-based gutters! I usually find that Drupal has inner elements to use, like .block or article. How does this work for other's use cases?

[perceptbe]

The option to switch certainly would be nice ... I'm used to Omega theme (Drupal) which uses the margin approach so the transition from Omega to Zen would be a littler easyer. Still, like Echozone said, Drupal does have the tendency to add a few inner-div's here and there :)

[marcvangend]

I think we should keep focus on Zen Grids here, which is (despite the obvious strong connections) independent from Drupal. A grid system like this should be usable on all valid markup.

[JohnAlbin]

So I've been hacking a way at the complicated code to make this work. Supporting a nested grid when %-based gutters is really hard because the % refers to the parent grid, not the nested grid.

While daydreaming the other week, I came up with an idea that may make the "gutters as margins" idea obsolete. What we all want is a way to not have padding on the grid items. We don't necessarily want %-based gutters.

What if we could have our cake and eat it too? Fixed-width gutters (px, rem, etc.), fluid %-based grid, but no padding on our grid items!

We can do that if we add up all the gutters for all columns and applied it to the container as padding. Then the %-based grid items will be based off the remaining content width of the container. And we use position: relative to move the grid items around from their default positioning and into the right column alignments.

[JohnAlbin]

We can do that if we add up all the gutters for all columns and applied it to the container as padding. Then the %-based grid items will be based off the remaining content width of the container. And we use position: relative to move the grid items around from their default positioning and into the right column alignments.

Alas, that was a pipe dream. When I went to implement it, I realized I hadn't taken into account grid items that span multiple columns; the width of those grid items would be some percentage of the container plus some multiple of the gutter size (of any unit). And you can't add % units plus a fixed unit (without using calc()). FAIL.

Anyway, no cake + eating cake. But I can still implement the standard %-based grid item widths with %-based gutters.

[JohnAlbin]

I've completed this in a feature branch. But I've promised myself that I'd keep the docs 100% in sync with the code in master, so I'm going to delay merging this feature temporarily. If you are interested, check out the zen-gutter-method branch. https://github.com/JohnAlbin/zen-grids/tree/zen-gutter-method

This feature should land this weekend.