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