W3C home > Mailing lists > Public > www-style@w3.org > November 2010

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

From: Phil Cupp <pcupp@microsoft.com>
Date: Thu, 18 Nov 2010 17:47:31 +0000
To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
CC: Alex Mogilevsky <alexmog@microsoft.com>, "www-style@w3.org" <www-style@w3.org>, Erik Anderson <Erik.Anderson@microsoft.com>, "Markus Mielke" <mmielke@microsoft.com>
Message-ID: <26AA92D3A047B64C8F326A0BF9EB17FA233A2E25@TK5EX14MBXC134.redmond.corp.microsoft.com>
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>
Received on Thursday, 18 November 2010 17:48:15 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:34 GMT