RE: a new proposal for grid layout, derived from MSFT's

I love this idea. It is a very simple addition, and it makes a lot of common scenarios much more manageable.

I think for named lines to really integrate well, line names should be interchangeable with line indices. 'grid-position' property as proposed here does that. But 'grid-column-span'/'grid-row-span' wouldn't readily take a name. It can be fixed by having separate properties for start/end grid lines (like 'grid-column-start'/'grid-column-end'... or even 'grid-x-start'/'grid-x-end' ?)

-----Original Message-----
From: Daniel Glazman [mailto:daniel.glazman@disruptive-innovations.com] 
Sent: Wednesday, November 17, 2010 7:36 AM
To: www-style@w3.org
Cc: Alex Mogilevsky; Markus Mielke
Subject: a new proposal for grid layout, derived from MSFT's

I took an action item during TPAC to think a bit more about grid layout. One of the requirements expressed during TPAC was the ability to name the lines of the grid so removing/adding lines does not imply extra work to change the indexes of lines in the grid specification of elements.

So I think we need three properties to achieve that:

'grid-columns' is a comma-separated list of values being a length
       or a length followed by an ident naming the line 'grid-rows' same things here

A length accepts the 'fr' unit described in [1].

'grid-position' takes four idents representing the name of the
       top line, name of the right line, name of the bottom line,
       name of the left line

Line that are not named cannot referenced by the 'grid-position'
property.

Exemple VI in [1] would then be:

#grid { grid-columns: 0px firstVLine,
                       20px intermediateVLine1,
                       30px intermediateVLine2,
                       20px lastVLine;
         grid-rows:    0px firstHLine,
                       20px intermediateHLine1,
                       30px lastHLine;
       }
#A { grid-position: firstHLine
                     intermediateVLine1
                     intermediateHLine1
                     firstVLine; }
#B { grid-position: firstHLine
                     intermediateVLine2
                     intermediateHLine1
                     intermediateVLine1; } #C { grid-position: firstHLine
                     lastVLine
                     lastHLine
                     intermediateVLine2; } #D { grid-position: intermediateHLine1
                     intermediateVLine2
                     lastHLine
                     firstVLine; }

That preserves the original spirit of Microsoft's proposal AND offers a clean solution to the issue raised by Peter Linss.

[1] http://www.interoperabilitybridges.com/css3-grid-align/

</Daniel>

Received on Wednesday, 17 November 2010 17:30:19 UTC