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 <
with Grid requires code something like:

#page {
  width: 800px;
  height: 600px;
  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-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).

Received on Tuesday, 3 January 2012 19:36:34 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:09 UTC