- From: Rachel Andrew via GitHub <sysbot+gh@w3.org>
- Date: Sat, 21 Jan 2017 21:58:42 +0000
- To: public-css-archive@w3.org
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