search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

The way grid deals with grid items who aren't referenced in `grid-template-areas` #23

Closed ror-y closed 7 years ago

ror-y commented 7 years ago

I am confused by the way Grid deals with items not accounted for in the grid-template-areas property.

In the following image, the blue More! grid item has not been referenced in the grid-template-areas property, and it has no grid-*-start or grid-*-end properties (which I have specified in shorthand with grid-area on the other grid items):

screen shot 2017-01-21 at 16 40 00

However, in the next image, the same has been applied, except this time a grid-area has been applied to the More! grid item:

screen shot 2017-01-21 at 16 40 15

I can't work out what is happening here. Has grid begun a new column track and a new row track for this item? Why would this be default behaviour?

demo: http://codepen.io/alanbuchanan/pen/qRmZyw

rachelandrew commented 7 years ago

A good question! It looks like this is expected behaviour, but it wasn't obvious to me either. I raised the issue over on the CSS WG repo, which has some further discussion. https://github.com/w3c/csswg-drafts/issues/966

Essentially this is a error state, when you use named areas you also create named grid lines. If you reference a non-existent grid line (which you are doing by creating this area named other-thing) then an additional track will be added to represent those lines and the item placed into that.

It takes a fair bit of sleuthing in the current spec to get from seeing this behaviour, to remembering that grid areas create lines, to the fact that this is what will happen when you use a non-existent line. It wasn't obvious to me despite knowing all the parts of this exist so I think it might be helpful to add an example in the spec to clarify what happens.