Putting gutters into designs seems to be a reasonably common thing. The
current Grid makes this overly difficult, however. For example, to
implement the canonical Regions example <
http://dev.w3.org/csswg/css3-regions/images/regions-intro-rendering.png>
with Grid requires code something like:
#page {
width: 800px;
height: 600px;
grid-template:
"aaa.e"
"....e"
"bbb.e"
"....e"
"c.d.e";
grid-rows: 52% 4% 20% 4% 20%;
grid-columns: 30% 5% 30% 5% 30%;
}
The gutters make this kind of confusing. It would be a lot nicer to just
specify something like:
#page {
width: 800px;
height: 600px;
grid-template:
"aae"
"bbe"
"cde";
grid-rows: min-content 1fr 1fr;
grid-columns: 1fr 1fr 1fr;
grid-spacing: 5% 4%;
}
I'm not sure if percentages in grid-rows/columns should work on the full
width/height of the grid, or the width/height minus the spacing. I've
cleverly avoided percentages in the above example. ^_^
Note that this would complicate the assignation of names to grid lines.
I'm not sure how to resolve that. It seems possible to handle this
magically with good results, though - if you did something like
"grid-column: 2 3;" it can automatically select the left edge of the second
column (to the right of the gutter) and the right edge of the second column
(to the left of the gutter).
~TJ