Re: [CSSWG][css-grid-layout] Updated WD of CSS Grid Layout

On Fri, Apr 19, 2013 at 4:53 PM, Ojan Vafai <ojan@chromium.org> wrote:
> I find the position-each-edge model impossible to wrap my head around, as
> does basically everyone I talk to. The syntax used to be easy to understand
> and is now totally inscrutable. I understand the working group has discussed
> this at length, but this seems like a big step backwards. I don't think web
> developers will get it.
>
> Maybe there's some syntax that could make the position-each-edge model
> intuitive, but this is not it.

Using grid-row and grid-column gives you back the old model, with a
slightly different syntax.  (Rather than "grid-row: 2; grid-row-span:
3;", you right "grid-row: 2 / span 3;", but that's it.)

> Here's a few things I find confusing:
> - grid-start: -1 means the grid item will go *after* the last explicitly
> positioned cell, but grid-end: -1 means it will go *in* the last explicitly
> positioned cell.

If this is confusing, it's because you're thinking of the numbers as
referring to columns/rows, rather than lines between the tracks.

With grid-start:-1, you're putting your start edge on the last line.
With grid-end:-1, you're putting your end edge on the last line.

> - grid-column: 1/2 and grid-column: 1/1 go in the same cell.

This is just error handling.  grid-column:1/3 is different than those.

> - grid-column: span 1 / 4...I still can't figure out what that's supposed to
> do.

The first value goes to grid-start, the second goes to grid-end.  So
it attaches its end edge to line 4, and spans 1 column.

(Note also that if the WG accepts our renaming of the logical
directions, the edge properties will become
grid-row-start/grid-row-end/grid-column-start/grid-column-end, which
is probably easier to understand.)

~TJ

Received on Saturday, 20 April 2013 00:39:23 UTC