Re: Comments for Grid Layout

On May 3, 2013, at 02:40, Lea Verou wrote:

> Hi all,
> 
> I recently attended a conference (Front-Trends) where one talk mentioned Grid Layout [1], among other things. Although authors were very interested in the functionality, there were a lot of complaints about the syntax both in the twitter backchannel and later in f2f discussions. I have to admit I agree with many of them. Here are a few:
> 
> 1) Top complaint: The new syntax was universally considered unintuitive. It seems most authors think of grids in terms of rows and columns with rowspans and colspans, than with start and end.  Someone pointed out that this means twice as many changes if a column/row is added or removed.

There are two parts to the syntax: declaring a grid template and positioning elements in it.

For the former: I've tried to recreate many different designs with grid templates. Often I could omit the row heights, most of the times I could omit the column withs (because many designs are based on equal-width columns), and I never seemed to need names for the grid lines. So in practice, the grid declaration always looked very simple, such as:

    grid: "a a a a"  10em
          ". b c d"  *
          "e e e e"  5em

(This assumes that the default column width is '*', a.k.a. '1fr', which is the case in css3-layout, but currently seems not the case in css3-grid-layout, which has 'fit-content' as default. I found there was equal-width columns to be much more common, so I'd argue that that should be the default.)

For the positioning: 'grid-area: a' to put something in slot a doesn't seem so complex.

And in fact, in my experiments, I rarely needed 'grid-area' at all, I just used 'flow-into: a' from css3-regions (a.k.a., 'flow' in css3-layout). If you consider the grid as creating regions in the sense of css3-regions (which the WG expects to be the case, after some more research), then 'flow-into' is often (most of the time?) easier, because you can put multiple elements into a slot and they automatically won't overlap.

> 2) They universally found it confusing that gutters are columns too [2] and expected an equivalent of multicol’s column-gap instead.

My arguments for not using a column-gap property were twofold. First, there's no need to learn an extra property if you see empty space as another kind of column/row. But more importantly, looking through a number of different typography books that talk about grids, some include the gaps in the template, some don't, some only include the gap in the template when the column (or row) is completely empty, i.e., not spanned by any slot, and some allow gaps of different sizes. E.g., some grids have one kind of gap between after first column (used for marginalia) and a different kind of gap between the other columns. Vertical gaps differ in size even more often.

> 3) This is mine: In grid-template [3], I don’t understand why every string needs to have the same number of words. We could simply define that the number of columns is the max number of words and the rest are padded in some way, e.g. by repeating the last word (though there are better solutions).

Yes, this has changed back and forth a few times. The argument for automatically padding out the short rows is that you don't have to type '.' symbols for the columns that you are not going to use anyway. The argument for declaring it an error is that a row that is short by one is likely to be a typo, so better to make no grid at all rather than try to auto-correct it in a way that the author probably didn't intend.

I don't think I have a preference at the moment...

> 4) Also, this has some good feedback and I haven’t seen Rachel posting it to the list: [4]

What is the feedback? It seems to just explain the draft.

> [1]: http://dev.w3.org/csswg/css-grid
> [2]: http://dev.w3.org/csswg/css-grid/#repeat-notation
> [3]: http://dev.w3.org/csswg/css-grid/#grid-template-property
> [4]: http://rachelandrew.co.uk/archives/2013/04/29/css-grid-layout-named-grid-lines-and-areas/



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 7 June 2013 06:36:45 UTC