[css3-grid] Add an analogue of border-spacing?

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