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

RE: [css3-grid-layout] [css3-layout] Grid-Template Declaration Merge

From: Phil Cupp <pcupp@microsoft.com>
Date: Tue, 21 Feb 2012 17:59:40 +0000
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <58A081B0F3FA704EAB1082E64639BB010A41C637@TK5EX14MBXC284.redmond.corp.microsoft.com>
I see... the new shorthand for grid-template, grid-rows and grid-columns you are saying is just plan "grid" and uses the inline sizing function syntax from Bert's spec.  Your right I did miss that.  Do you have any thoughts on how I'd specify named lines and differentiate those from the template strings?  Maybe they should be idents instead of strings?

grid:
  "ab" / minmax(min-content, 1fr) /* row 1 */
  "ac" / minmax(min-content, 1fr) /* row 2 */
  ( minmax(min-content, 1fr) )[2]; /* 2 cols */

/* Also valid? */
grid:
  start minmax(min-content, 1fr) middle minmax(min-content, 1fr) end, /* 2 rows with 3 named lines*/
  start minmax(min-content, 1fr) middle minmax(min-content, 1fr) end; /* 2 cols with 3 named lines */

When not using the template syntax we need something to separate row definitions from column definitions.  I used a comma.  I think that's compatible with the template syntax as well and can eliminate the need for the trailing '/' which currently follows each row definition that receives a sizing function.  Like this:

grid:
  "ab" minmax(min-content, 1fr) /* row 1 */
  "ac" minmax(min-content, 1fr), /* row 2 */
  ( minmax(min-content, 1fr) )[2]; /* 2 cols */

/* everything together (woof) */
grid:
  "ab" start minmax(min-content, 1fr) /* row 1 and start line definition */
  "ac" middle minmax(min-content, 1fr) /* row 2 and middle line definition */
  end, /* end line definition */
  start minmax(min-content, 1fr) middle minmax(min-content, 1fr) end; /* 2 cols with 3 line definitions*/

It's getting a little crowded but it can all work together.  What do you think?

-Phil

-----Original Message-----
From: fantasai [mailto:fantasai.lists@inkedblade.net] 
Sent: Tuesday, February 21, 2012 6:55 AM
To: www-style@w3.org
Subject: Re: [css3-grid-layout] [css3-layout] Grid-Template Declaration Merge

On 02/18/2012 04:56 AM, Phil Cupp wrote:
>
> Regarding grid-template being a shortcut that includes the ability to specify the sizes of each track, I'm not a fan of that syntax.  Here's why:
>
> 1. Aligning columns with their sizing functions seems like it breaks up the template to the point to where  tracking can become a problem and you lose the primary benefit of the template (seeing the shape and proportions of the grid via ascii-art).
> #grid {
>    grid-template:
>      "a                        b                        c"
>      "a                        d                        d"
>      "a                        e                        e"
>       minmax(min-content, 1fr) minmax(min-content, 1fr) 
> minmax(min-content, 1fr); }
>
> vs
>
> #grid {
>    grid-template:
>      "abc"
>      "add"
>      "aee";
>    grid-columns: ( minmax(min-content, 1fr) )[3]; }

There's no reason why you couldn't write that first declaration as

   grid: "abc"
         "add"
         "aee"
         ( minmax(min-content, 1fr) )[3];

If there's a shortcut, you have both options. Nothing requires you to space out the column sizes. The advantage of the shortcut is that the rows can be spliced in, e.g.

   grid: "abc" / min-content
         "add" / 1fr
         "aee" / min-content;

which is equivalent to

   grid-template: "abc"
                  "add"
                  "aee";
   grid-rows: min-content 1fr min-content;

> 2. Having grid-template as a shortcut that includes grid-rows and 
> grid-columns means it resets those properties even when you don't 
> specify their values.  I may be underestimating the typical author's 
> understanding of shortcuts and specificity, but I anticipate confusion that:

I think you missed something here. I'm not proposing to make 'grid-template' a shorthand that resets everything -- I agree that would be bad! I'm suggesting to make a new property that's shorthand, that resets 'grid-template', 'grid-rows', and 'grid-columns'. (Note, I'm not suggesting that we get rid of any of those three sub-properties, or that we change their behavior!)

I think it's important to have a shorthand that resets everything, because as we add new functionality, the author should have a way of knowing for sure they're starting with a blank slate, regardless of what may have arrived through the cascade.

~fantasai
Received on Tuesday, 21 February 2012 18:00:30 GMT

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