JohnAlbin/compass-zen-grids — Issue #6: Add $zen-column-widths to allow for non-equal grid columns
Author: JohnAlbin
Created: 2012-02-23 14:51:28+00:00
State: open

Equal column grid systems are the norm. But they are not the only way to create a grid system.

(Mark Boulton reminds us)[http://twitter.com/#!/markboulton/status/172263476302053376] that:
> The fundamental problem with ALL grid generators and frameworks is they assume you want columns of the same width.

(He continues)[http://twitter.com/#!/markboulton/status/172271922791460864]:
> What about asymmetry? Ratio grids?

Zen Grids currently uses the `$zen-column-count` to specify the number of equal-width columns in the grid. As an alternative to that variable, we could add a `$zen-column-widths` variable that takes in a list of widths. For example:

// Column 1: 66% x 66% = 45%
// Column 2: 66% x 33% = 22%
// Column 3: 33%

$zen-column-widths: (45%, 22%, 33%);

Then our normal `@include zen-grid-item(2, 1);` (which specifies that a grid item should span 2 columns and be positioned in the 1st column) would set the grid item’s width at `67%` (`45 + 22`). And `@include zen-grid-item(2, 2);` would set the item’s width at `55%` (`22 + 33`).

Obviously, you could use `em`s or `px`s instead of `%`s.