[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 Friday, 17 February 2012 16:01:32 UTC