Re: [css-grid] Undefined named lines placement

Hi,

On 29/01/16 21:18, Eric A. Meyer wrote:
> Firefox Nightly, and now Chrome 50+, act consistently on the test URL
> above, which examines situations where a named area is implied by
> gridline names along one axis, but not the other.  One example:
> 
>    .grid {grid-template-columns: 1fr [content-start] 1fr [content-end] 1fr;
>           grid-template-rows: 3em 1fr 3em;}
>    .content {grid-area: content;}
> 
> What both FF and Chrome now do is place the `.content` element in the
> proper column track, but in a row after the explicitly defined rows, AND
> after an extra row that follows the defined tracks.  So there are a
> total of five row tracks in that example: the three created by
> `grid-template-rows`, an empty row, and then the row containing `.content`.

As you're setting "grid-area: content", you're actually setting all the
4 placement properties to that value:
* grid-column-start: content;
* grid-column-end: content;
* grid-row-start: content;
* grid-row-end: content;

Which is equivalent to using the suffixes for the line names:
* grid-column-start: content-start;
* grid-column-end: content-end;
* grid-row-start: content-start;
* grid-row-end: content-end;

The columns are easily resolved as you can find the names in
grid-template-columns (in this example it's equivalent to "grid-column:
2 / 3"). However, that's not possible fro rows.

Grid layout considers all the lines in the implicit grid to have any
given name.
So, to resolve "grid-row-start: content-start" it looks for a line
called "content-start", as there're no lines with that name. It
considers that the first implicit line (line 5) has the name
"content-start".
For "grid-row-end: content-start" it does the same.
Finally, it resolves it as "grid-row: 5 / 5". Which due to conflict
handling ends up being "grid-row: 5 / 6".

This is a way to show a mistake. When you point to a nonexistent line,
you're going to get a weird behavior.

> (All of this is analogous in the other direction, as the test URL shows,
> and consistent regardless of the value of `grid-auto-flow`.)

grid-auto-flow property is used for auto-placed items, in this case
you've explicitly placed the item (even if you're using an undefined
grid line name in one axis).

> I'm checking to make sure this is the correct behavior, since it strikes
> me at first blush as a bit odd.  It would make more sense to me without
> that fourth, empty grid track.  If it is correct, documenting it will be
> very important, since I doubt it's what authors will expect.  (Of
> course, the weirdness of this could serve as an incentive to avoid doing
> it in the first place…).

In theory it's the behavior described on the spec [1]:
  "If a name is given as a <custom-ident>, only lines with that name
  are counted. If not enough lines with that name exist, all implicit
  grid lines are assumed to have that name for the purpose of finding
  this position."

But probably it'd be worth to add an example to avoid misunderstandings
(maybe similar to the one in the "span" section [2]).

I agree it's a weird behavior, but it's just a way to show errors in
your CSS. If you get an extra row like that it's probably because of you
were missing a line name like in the example before, and not because of
you were actually trying to do that.

Last, I've just published a blog post trying to explain all the
different options to place items on a grid (including this particular
topic). Maybe it can help to clarify things. [3]

Bye,
  Rego

[1] https://drafts.csswg.org/css-grid/#grid-placement-int
[2] https://drafts.csswg.org/css-grid/#grid-placement-span-int
[3]
http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

Received on Monday, 1 February 2016 11:31:02 UTC