Add $zen-column-widths to allow for non-equal grid columns

[JohnAlbin]

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

Mark Boulton reminds us that:

The fundamental problem with ALL grid generators and frameworks is they assume you want columns of the same width.

He continues:

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:

// We define our unequal-width grids in this way:
// Column 1: 66% × 66% = 45%
// Column 2: 66% × 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 ems or pxs instead of %s.

[pixelwhip]

This was the first thing I thought of when I looked at this grid implementation. I'm glad to see there was already an issue! I went ahead and took a swing at it. See https://github.com/JohnAlbin/compass-zen-grids/pull/16 (I wasn't sure how to add a pull request to an existing issue.)