W3C home > Mailing lists > Public > www-style@w3.org > April 2016

[css-grid] improving the grid shorthand

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 14 Apr 2016 14:08:26 -0400
To: "www-style@w3.org" <www-style@w3.org>, "Eric A. Meyer" <eric@meyerweb.com>, Rachel Andrew <rachelandrewuk@gmail.com>, Jen Simmons <jen@jensimmons.com>
Message-ID: <570FDC9A.9060705@inkedblade.net>

Eric pointed out earlier that 'grid' being able to set either
template values OR auto-flow values is quite limiting:

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


~fantasai and TJ
Received on Thursday, 14 April 2016 18:08:56 UTC

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