Re: [csswg-drafts] [css-grid-1] Null Cell Tokens at the end row of a grid template are ignored per the current CSS Grid spec (#3638)

OK, so it looks like the problem here is that Chrome includes the entire grid in the scrollable overflow area (in the vertical dimension; not horizontal), whereas Firefox only considers the areas occupied by content. [Simplified Testcase](<!DOCTYPE%20html>%0A<div%20style%3D"display%3A%20grid%3B%20width%3A%2080vw%3B%20height%3A%2080vh%3B%20border%3A%20solid%3B%20overflow%3A%20scroll%3B%20grid%3A%2050vh%2050vh%20%2F%2050vw%2050vw%3B">%0A%20%20<div%20style%3D"background%3A%20yellow%3B"><%2Fdiv>%0A<%2Fdiv>)

I think we should fix that. I think authors would expect the entire grid to be included in the scrollable overflow area, content or no, and also in both dimensions. (Grid layout should be symmetrical.)

CC @MatsPalmgren @javifernandez @mrego @jensimmons @rachelandrew @tabatkins 

A couple of extra notes for you, @charbelnicolas:

* I would recommend learning about the `align-content` and `justify-content` properties. When set to `center` on  grid container, they will center the grid. See You might also want to use `padding` and `gap` to create the 2rem spaces. I think this will be easier than having to create extra rows just to add such space. (I suspect there are good tutorials for grid and gaps and alignment properties online somewhere... I'm pretty sure e.g. Rachel Andrews has articles and videos on it. Or you can read the specs  or MDN and just play with the property values to see what they do.

* The grid-template-area names, whether they are null or not null, don't affect how those cells are sized. They're just names. The only power they have in sizing the grid is to create an extra row or column if there wasn't one in specified by grid-template-rows/columns.

GitHub Notification of comment by fantasai
Please view or discuss this issue at using your GitHub account

Received on Saturday, 9 February 2019 01:43:56 UTC