[css-grid] improving the grid shorthand

https://drafts.csswg.org/css-grid-1/issues-wd-20150917#issue-41

Eric pointed out earlier that 'grid' being able to set either
template values OR auto-flow values is quite limiting:
   https://lists.w3.org/Archives/Public/www-style/2016Mar/0345.html
   https://lists.w3.org/Archives/Public/www-style/2016Apr/0093.html

In particular, when one wants to set up an auto-flow grid, one
of the dimensions is *not* auto-flow, and therefore needs to
set up an explicit template. For example, you'll set up your
columns and auto-fill into rows. But the grid shorthand right
now does not allow this, even though this is the primary usage
pattern of auto-flow grids.

To fix this, we'd like to change the syntax of 'grid' to remove
the current grid-auto branch
   <‘grid-auto-flow’> [ <‘grid-auto-rows’> [ / <‘grid-auto-columns’> ]? ]?
which isn't particularly useful, and instead extend the branch
that sets grid-template-rows / grid-template-columns
   <‘grid-template-rows’> / <‘grid-template-columns’>
to also be able to specify auto-flow values.

Our current idea for this is
   <grid-template-rows>  / [ auto-flow && dense? ] <grid-auto-columns>? |
   [ auto-flow && dense? ] <grid-auto-columns>?  / <grid-template-columns>
which merely extends the syntax for rows or columns in the
shorthand to be either a track listing or an auto-flow setup.

For example,
   grid: auto-flow 10em / repeat(auto-fill, 30em);
sets up a grid that
   * fills the inline axis with as many 30em columns as will fit
   * auto-flows into rows 10em tall

Thoughts?

~fantasai and TJ

Received on Thursday, 14 April 2016 18:08:56 UTC