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

Regarding your comments under interactions below:

There are three ways to create grid rows/columns:

1. Define it explicitly using the grid-rows/columns property.  For example: 
#grid { display: grid; grid-columns: 10px 20px 30px 40px } /* Creates four columns. */

2. Refer to a grid row/column with a grid item.  For example:
/* Creates two rows and three columns, "auto" sized by default. */
#grid { display: grid; }
#grid > #item { grid-row: 2; grid-column: 3 }

3. Use the grid-template property to specify named grid cells (which by their position in the ascii art refer to one or more rows/columns).  For example:
/* A grid with two rows and three columns naming four cells. */
#grid { 
  display: grid;
  grid-template:
    "a b c"
    "a d d";              
}

So basically if you refer to a row or column through any of the possible mechanisms, then the row or column exists along with any that need to precede it.

None of the properties I mention above limit each other.  For example, if you were to position an item in grid-column: 4 using the template definition supplied in the third example, you'd have a fourth auto-sized (by default) column which contained that item.  It is located just to the right of cell "c" (in English).  If you combined the grid-columns definition in example one with the grid-template definition in example three, you get four columns, the fourth just doesn't have any named grid cells that you can use to position your grid items.  The fourth column is 40px wide.

I reread through the applicable sections of the spec and agree that the interactions between the grid-template property and the other properties (grid-row/column[-span] and grid-rows/columns) aren't specified.  I'll open an issue on the grid spec wiki [1] to update the spec.  Let me know if you're in disagreement with anything I've described above.

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];
}

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:

/* this doesn't set column sizes */
#grid {
  display: grid;
  grid-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr);
  grid-template:
    "abc"
    "add";
}

/* and neither does this */
#grid.phone-layout {
  grid-template:
    "abc"
    "add";
}
#grid.desktop-layout {
  grid-template:
    "abc"
    "add";
}
#grid {
  display: grid;
  grid-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr);
}

So for the reasons above I'd prefer not to make grid-template a shortcut.  Let me know how strongly you feel about it. 

-Phil

[1]  http://wiki.csswg.org/spec/css3-grid-layout

-----Original Message-----
From: fantasai [mailto:fantasai.lists@inkedblade.net] 
Sent: Friday, February 17, 2012 8:01 AM
To: www-style@w3.org
Subject: [css3-grid-layout] [css3-layout] Grid-Template Declaration Merge

[This a series of comments arising from Bert and I attempting to merge the Template and Grid models into a combined Grid Template model so that we can have one layout model going forward. Some issues arise from merging.
Others are "we found lots of issues while attempting to merge" comments.]

Syntax and Shorthands
---------------------

CSS3 Grid Layout and CSS3 Template Layout use two similar but slightly different syntaxes to declare templates.

We propose merging the two together by creating a shorthand that uses the CSS3 Template syntax to set the three properties that create a grid in CSS3 Grid: 'grid-template', 'grid-rows', and 'grid-columns'.

Call it 'grid' for now, and have it take the syntax CSS3 Template assigns to the 'display' property. It would set 'grid-template' to the template strings given; 'grid-rows' to the row intervals given; and 'grid-columns' to the column intervals given.

This has the advantage of making it easy to turn off or reset a grid
entirely:
   grid: none;

It also preserves one of the nice things in the Template syntax, which is that rows sizes can be syntactically matched up with their rows, if the author finds that easier to use:

   grid: "a   .   b   .   c"  /2em   /* <-- row sizes spliced in */
         ".   .   .   .   ."  /1em   /* so you can see right away what size */
         "d   .   e   .   f"         /* is assigned to that row in the template */
         ".   .   .   .   ."  /1em
         "g   .   h   .   i"  /2em
         5em 1em  1fr  1em 10em}

equivalent to:

   grid-template: "a   .   b   .   c"
                  ".   .   .   .   ."
                  "d   .   e   .   f"
                  ".   .   .   .   ."
                  "g   .   h   .   i";
   grid-rows: 2em 1em 1fr 1em 2em;
   grid-columns: 5em 1em 1fr 1em 10em;

Interactions
------------

It's not defined what happens when both a 'grid-template' is given and 'grid-rows' and 'grid-columns' exist.

Suggested definition:

   - If 'grid-template' is given, it defines the number of rows and columns;
     excess row and column sizes in 'grid-rows' and 'grid-columns' are ignored.

   - If not enough row and column sizes are given in 'grid-rows' or
     'grid-columns' to match the template, the extra tracks are set to
     <default track size>.

~fantasai

Received on Saturday, 18 February 2012 03:57:25 UTC