This is related to:
https://bugzilla.mozilla.org/show_bug.cgi?id=1525310
And
https://bugs.chromium.org/p/chromium/issues/detail?id=928885
I've made a CODE PEN outlining this issue with extra info:
https://codepen.io/charbelnicolas/pen/omGBjN
Please consider reading it, and let me know if what I'm saying makes sense.
Thank you
In case you don't want to read the Code Pen I'll paste the text here:
As per the current CSS Grid spec, it seems Null Cell Tokens placed in ROWS after the LAST grid item are not supposed to contribute anything to the grid vertical dimensions.
Fortunately, Google Chrome, as per version 72.0.3626.96 does take into account Null Cell Tokens placed after the last grid item to contribute to its parent vertical dimensions, which to me, seems the most logical too.
It is easier to layout your whole website with one grid, while being able to center all your items both vertically and horizontally with the use of Fr units on Null Cell Tokens.
This CODE PEN will run differently on Firefox because of this issue.
If you check the CSS code, you can see the minmax(2rem, 1fr) set on the first row and on the last one will always center the grid items vertically on the whole viewport without the need of anything else. I think it is counterintuitive to allow the use of Null Cell Tokens on the top row and in between items but not at the last row in the grid.
You could argue that while not the best solution, it would be easy just to name the grid-area where the Null Cell Token is and add a div to the html, but why do it when Google Chrome's solution is already so elegant? Why clutter the CSS and HTML files with more lines of code?
Or better yet, please tell me why it shouldn't work like it already does in Google Chrome. Why not make things easier for everyone and more intuitive?
Please check this CODE PEN on Chrome and on Firefox to see the difference. A scrollbar must be present to see the issue. The box containing this text should NOT touch the bottom of the browser window.
CSS Grid Spec:
https://www.w3.org/TR/css-grid-1/
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3
