W3C home > Mailing lists > Public > www-style@w3.org > January 2012

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 3 Jan 2012 11:30:10 -0800
Message-ID: <CAAWBYDBJLWLUa7q0OpXi88Y=4kq2GqZ42=6LHEPDPRjWqiQp_w@mail.gmail.com>
To: www-style list <www-style@w3.org>
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
Received on Tuesday, 3 January 2012 19:36:34 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT