[css-grid] error case of placement against missing lines needs example

[rachelandrew]

I'm trying to work out where the spec defines this behaviour. Assuming markup:

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

And this CSS, creating a 4 column track grid and naming two of the child elements, which are then laid out using grid-template-areas.

.grid .a {
  grid-area: a;
  background-color: blue;
}

.grid .b {
  grid-area: b;
  background-color: red;
}

.grid .c {
  background-color: yellow;
}

.grid {
  width: 600px;
  border: 1px solid black;
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "a a a b";
}

c is not named and so creates a new track in the implicit grid and goes into the first cell of that track as I would expect.

If I then name c:

.grid .c {
  grid-area: c;
  background-color: yellow;
}

But fail to define it in grid-template-areas I end up with an additional column as well. The item c is placed in the bottom right cell.

The implementations are both treating this is the same way (Chrome 58 and Firefox 52), but the issue has confused another author who asked me about it, and I'm unsure as to why the second example (a named item without a place on the grid) would auto-place differently to the first (an unnamed item without a place on the grid).

[astearns]

And if you add a D grid item and give it 'grid-area: d' it overlaps the placement of C.

My read of the algorithm makes me think that c is no longer auto positioned when it has a grid-area set, so it moves up to getting placed in step 1 rather than step 4, and therefore step 3 is creating an additional column and row for it.

https://drafts.csswg.org/css-grid/#auto-placement-algo

This might be useful if the algorithm were creating new rows and columns for each undeclared area, but lumping all unknown positioning in the same place seems bad.

Perhaps we should change definite grid position from "at least one specified line" to "at least one specified line defined on the grid container"? Then C could fall back to auto positioning.

[astearns]

In any case we should have an example in the spec that mentions what happens when you try to use an undefined grid area/line

[astearns]

Ah, Example 37 in https://drafts.csswg.org/css-grid/#line-placement already mentions a version of this, and I found some discussion of this from last year: https://lists.w3.org/Archives/Public/www-style/2016Feb/0005.html

Lines on the implicit grid are defined to match all names, so by the current spec both implementations are correct.

[rachelandrew]

Good sleuthing! I was looking at the stuff around auto-placement. This seems reasonably odd behaviour from the point of view of an author so an example here https://drafts.csswg.org/css-grid/#grid-auto-flow-property would be good. I can put something together.

[fantasai]

Rachel, I'm giving you blanket permission to add whatever examples or figures you think are necessary to any of my specs. :) Just ping me if you'd like me to look it over, and make sure they are marked up correctly (e.g. using class=example or class=figure as appropriate.)

[rachelandrew]

ok - will do. Would you like me just to make a pull request for anything like this? There are a couple of images in the grid spec that really need redoing as SVG (a hand drawn one and one that was a screenshot of my example) which I keep meaning to look at too.

[fantasai]

Sure, go ahead.

[tabatkins]

This doesn't have anything to do with auto-placement - all the items are explicitly placed, after all. This is about line names.

When you say grid-area: c;, that expands to grid-row-start: c-start; grid-row-end: c-end; grid-column-start: c-start; grid-column-end: c-end;. None of these named lines exist in the grid - the only named lines are a-start, a-end, b-start, and b-end (all implicitly created by grid-template) in each axis. However, lines in the implicit grid have all possible names, so the line-search ends up finding the first implicit line in each axis for all the properties. Grid areas aren't allowed to span zero tracks, so the end line gets pushed out by one, to the second implicit line.

Thus, the C item starts on line 3 (the first implicit line) and ends on line 4 in each axis, leaving one empty track around the edge of the implicit grid (between lines 2 and 3). You don't see the empty column, because it's "auto" sized and collapses to 0 size, but the empty row is 100px high due to grid-auto-rows.

A D item with grid-area: d gets put in the exact same place, for the same reason.

This behavior is intentional. It's an error case, whose behavior falls out of the generic behavior we purposely defined for finding non-existent line names. We're not interested in making this case act "better", because failing obviously and in a slightly weird way makes it more likely the author will see that something's wrong and will fix it.

If you really feel like calling out a case like this would help, @rachelandrew, feel free to draw up an example. But it's definitely an error case and will stay that way. ^_^

[fantasai]

Closing as wontfix, please re-open if you feel strongly that this needs some edits.