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

> -----Original Message-----
> From: Phil Cupp
> Sent: Thursday, November 18, 2010 9:48 AM
> To: Daniel Glazman
> Cc: Alex Mogilevsky; www-style@w3.org; Erik Anderson; Markus Mielke
> Subject: RE: a new proposal for grid layout, derived from MSFT's
> 
> I definitely see the value in named lines.  My initial reaction was that given
> a grid like below, that it's strange to define the region for "Main" using lines
> that could be named "Nav", "Header", "End", and "Footer".
> 
> Header Header Header
> Nav Main Main Main
> Nav Main Main Main
> Nav Main Main Main
> Footer Footer Footer
> 
> I think though that could be addressed with either multiple names for lines
> or a syntax that also allows naming of regions which is separate from line
> naming (like the grid-template property).  I don't see the two as being
> exclusive.  I didn't totally follow what you were saying about moving the
> region definition to the grid element using lines or indices.  Is it like this
> (see use of grid-region property below)?
> 
> #grid {
>   grid-columns: 0px HeaderColumnStart NavColumnStart FooterColumnStart,
>     fit-content NavColumnEnd MainColumnStart,
>     1fr HeaderColumnEnd MainColumnEnd FooterColumnEnd;
> 
>   grid-rows: 0px HeaderRowStart,
>     fit-content NavRowStart MainRowStart,
>     1fr NavRowEnd MainRowEnd FooterRowStart,
>     fit-content FooterRowEnd;
> 
>   grid-region: Main MainColumnStart MainRowStart MainColumnEnd
> MainRowEnd;
>   grid-region: EquivalentMain 2 2 3 3;
> }
> 
> In the above example Main is the name of the region and
> MainColumnStart/End and MainRowStart/End are aliases to line indices.
> The two region definitions in my example would be equivalent.
> 
> Let me know if that's in line with your thinking or if I missed it.
> 
> Regarding thinking in left/right versus start/end, I think we want to treat
> lines/edges of regions as being offsets in the inline direction for columns
> and the block flow direction for rows.  There are some illustrations and
> words to describe the initial thinking on this point in section 7 of the current
> Grid Alignment spec [1].  Let me know what you think.
> 
> -Phil
> 
> [1] http://dev.w3.org/csswg/css3-grid-align/#grid-item-alignment
> 
> -----Original Message-----
> From: Daniel Glazman [mailto:daniel.glazman@disruptive-innovations.com]
> Sent: Wednesday, November 17, 2010 9:43 PM
> To: Phil Cupp
> Cc: Alex Mogilevsky; www-style@w3.org; Erik Anderson; Markus Mielke
> Subject: Re: a new proposal for grid layout, derived from MSFT's
> 
> Le 18/11/10 00:02, Phil Cupp a écrit :
> 
> > Hi Daniel,
> >
> > Definitely it would be great to have you as an editor and contributing
> > to the spec.  There are few bugs in the current draft that need fixed
> > that impact its readability... we can list you as an editor when those
> > updates are made (soon).
> >
> > Couple of comments on named lines...  I'm wondering if its more
> > natural to name the regions rather than the lines?  Are there
> > scenarios where named lines stand out as the clear winner over named
> > regions?  Do you feel like there is room for both or would the lines +
> > the grid-position property be a replacement for naming a rectangular
> > region of the grid using something like the grid-template property
> > that Tab proposed?
> 
> IMHO, and after chats with designers, I think names are much more
> important that indexes. I think a compromise could be the following
> one: define region names based on lines or indexes and make each region
> specify its region name instead of grid-row/grid_column/ span. In other
> terms, move the regions specification from each region to the grid itself and
> then use only a grid-position property on each region. That way, we can
> harmonize everything.
> It's early here, I just fell from the bed and I don't know if I'm very clear. Let
> me know if it's not :-)
> 
> > Some other minor nits:
> >
> > 1. Seems like there should be an implicit start line instead of
> > needing to define a 0px offset for a named one.
> 
> I don't think so. The first line could be for instance at 20px from left.... More
> important, we need to think about ltr/rtl. Do we need to think in terms of
> left/right and top/bottom or start/end and such?
> 
> > 2. One of my co-workers, Erik who is CC'd, suggested that you could
> > benefit from multiple names on a single line to avoid coupling
> > together adjacent grid items (because they would share a grid line of
> > the same name making it impossible to split them apart without
> > updating at least one of the items).  He'll reply with more of his
> > thoughts.
> 
> That's an interesting idea.
> 
> </Daniel>

Looks like Phil gave the example of how multiple names would allow you to decouple regions from each other and also make names more obvious and manageable.

Another approach I could see is naming columns and rows rather than lines. The grid-column/grid-row and grid-column-span/grid-row-span properties could then take strings referring to the named columns/rows. I think allowing multiple names for a column/row is also desireable.

Here's an extreme example of being able to totally redefine the grid layout and add/remove rows/columns without needing to touch the properties on the grid items themselves.

Going off of Phil's example but adding an additional "Stats" item between nav and main:
-----Header-----
Nav Stats Main
-----Footer-----

#grid {
  grid-columns:
      1fr HeaderFirstCol FooterFirstCol NavFirstCol NavLastCol,
      2fr StatsFirstCol StatsLastCol,
      3fr HeaderLastCol FooterLastCol MainFirstCol MainLastCol;
  grid-rows:
      fit-content HeaderFirstRow HeaderLastRow,
      1fr NavFirstRow NavLastRow StatsFirstRow StatsLastRow MainFirstRow MainLastRow,
      fit-content FooterFirstRow FooterLastRow;

#header {
  grid-column:  HeaderFirstCol;
  grid-column-span: HeaderLastCol;
  grid-row:  HeaderFirstRow;
  grid-row-span: HeaderLastRow;
}
#nav {
  grid-column:  NavFirstCol;
  grid-column-span: NavLastCol;
  grid-row:  NavFirstRow;
  grid-row-span: NavLastRow;
}
#stats {
  grid-column:  StatsFirstCol;
  grid-column-span: StatsLastCol;
  grid-row:  StatsFirstRow;
  grid-row-span: StatsLastRow;
}
#footer {
  grid-column:  FooterFirstCol;
  grid-column-span: FooterLastCol;
  grid-row:  FooterFirstRow;
  grid-row-span: FooterLastRow;
}

With this syntax, a string value for the column-span or row-span means "span to this named [row|column]". You could simplify the set of names if you decide that a header/footer is always just one row (don't bother setting a grid-row-span value), that the header/footer should always span the same set of columns (give them the same name), etc.

- Erik

Received on Thursday, 18 November 2010 21:47:41 UTC