Re: [css3-gridalign] Named gridlines

For elements spanning only one cell, would it be possible to define { 
grid-position: 'myRow' 'myColumn'; } instead of a 4-elements syntax ?

It would be equivalent to {
    grid-position-top: 'myRow';
    grid-position-bottom: 'myRow';
    grid-position-left: 'myColumn';
    grid-position-right: 'myColumn';
}

----

When you speak about number+name combination, what are you refering to ? Do 
you want to allow something like {
    grid-position: 'myFirstRow' 'myFirstColumn' 2 3;
} for an element spanning across 2 rows and 3 columns ?

----

In such case, what about negative (or null) spans ? Are they allowed ? If 
negative spans are allowed, how are they supported ? (do the anchor edge of 
the element in 'firstRow'/'firstColumn' change, for instance ?)

Regards,
François





-----Message d'origine----- 
From: Tab Atkins Jr.
Sent: Tuesday, November 02, 2010 10:12 AM
To: www-style list
Subject: [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:45:25 UTC