[css3-gridalign] Named gridlines

During the TPAC presentation of Grid Alignment, it was brought up that
named gridlines could be useful.  The main reasoning was that if
you've set up a page layout and positioned all your elements, but you
end up having to add a new row to the middle, you suddenly have to
change the rowspans of any cell crossing the new column, and the row
position of any cells below the new column.  By using a few named
lines and positioning the major cells relative to that, adding the new
row could result in many less edits being necessary.

There are two additions that need to be made to make this possible.
First is the ability to name a line.  At the moment lines are
anonymous and defined solely by their distance from the previous line,
in the grid-rows and grid-columns properties.  We could name lines by
adding a string after a particular length.  For example:

grid-rows: "pagetop" auto "articletop" auto "articlebottom" auto "pagebottom";
grid-columns: "pageleft" .2fr "divider" .8fr "pageright";

...would define a 4-row grid, with each grid line being named.

The second requirement is the ability to position relative to a named
line.  While this can potentially be retrofitted into the existing
position/span syntax, it's probably easier to swap things over to a
top/right/bottom/left syntax instead.  This is functionally equivalent
in the simple case, but when using named lines it's a bit easier.  For
example, one can style a page like so, assuming the grid-row
declaration above:

#header { grid-position: 'pagetop' 'pageright' 'articletop' 'pageleft'; }
#sidebar { grid-position: 'articletop' 'divider' 'articlebottom' 'pageleft'; }
#article { grid-position: 'articletop' 'pageright' 'articlebottom' 'divider'; }
#footer { grid-position: 'articlebottom' 'pageright' 'pagebottom' 'pageleft'; }

This example purely uses the named gridlines, but in a more complex
example it may be reasonable to mix both numbered gridlines and named
gridlines.

~TJ

Received on Tuesday, 2 November 2010 09:13:12 UTC