Re: Comments for Grid Layout

On Thu, May 2, 2013 at 10:40 AM, Lea Verou <lea@w3.org> 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.

It needs to be called out more in the draft, but this is *entirely wrong*.

If you just use grid-column and grid-row, you can continue to pretend
that the numbers refer to rows/columns, rather than lines.  If you
want something to be in the second column, just say "grid-column: 2;",
same as in the older syntax.  The span is now built into the same
property as well, rather than requiring a second property to specifiy:
"grid-row: 2 / span 2;".

We got a lot of feedback from a certain subset of designers that were
*far* more comfortable with lines than rows/columns.  The current
syntax is the best compromise we could come up with - it gives easy
syntax to both camps.

I think this will be a lot clearer when we switch the naming over to
"grid-column-start/end" and "grid-row-start/end".  Then it's clearer
that these are subproperties of the grid-row/column properties, and it
becomes more natural to just use the shorthands.  We also plan to add
a "common patterns" section, similar to what Flexbox has, which should
help a lot.

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

Yes, we need an explicit gutter property for column and row gutters.
Otherwise, auto flow is *completely* broken when "gutters" are used.

> 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).

Possible, but perhaps surprising?  I dunno.

> 4) Also, this has some good feedback and I haven’t seen Rachel posting it to
> the list: [4]
>
> [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/

Yes, I saw this a few days ago and have had it open in my browser
since.  It shows some confusion over things that already exist in the
draft, but that just means we need to make things clearer and easier.
Otherwise, great feedback.

~TJ

Received on Thursday, 2 May 2013 18:08:40 UTC