[csswg-drafts] [css-grid] auto-placement of item named with grid-area, but without a corresponding placement in grid-template-areas

rachelandrew has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-grid] auto-placement of item named with grid-area, but without
 a corresponding placement in grid-template-areas ==
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.

<img width="614" alt="auto-place1" 
src="https://cloud.githubusercontent.com/assets/2764898/22177998/090cc656-e023-11e6-85c4-4b1262fc19ca.png">

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.

<img width="610" alt="auto-place2" 
src="https://cloud.githubusercontent.com/assets/2764898/22177996/028c9248-e023-11e6-8ec7-07ea79474f59.png">

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

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/966 using your GitHub 
account

Received on Saturday, 21 January 2017 21:58:49 UTC