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.
Equal column grid systems are the norm. But they are not the only way to create a grid system.
Mark Boulton reminds us that:
He continues:
Zen Grids currently uses the
$zen-column-countto specify the number of equal-width columns in the grid. As an alternative to that variable, we could add a$zen-column-widthsvariable that takes in a list of widths. For example: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 at67%(45 + 22). And@include zen-grid-item(2, 2);would set the item’s width at55%(22 + 33).Obviously, you could use
ems orpxs instead of%s.