- From: fantasai via GitHub <sysbot+gh@w3.org>
- Date: Sat, 09 Feb 2019 01:43:51 +0000
- To: public-css-archive@w3.org
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](http://software.hixie.ch/utilities/js/live-dom-viewer/?<!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 https://www.w3.org/TR/css-align-3/#align-justify-content 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. https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) * 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 https://github.com/w3c/csswg-drafts/issues/3638#issuecomment-462001543 using your GitHub account
Received on Saturday, 9 February 2019 01:43:56 UTC