Apparently it’s a bug on Chrome which detailed here:
https://github.com/rachelandrew/gridbugs#10-some-html-elements-cant-be-grid-containers
And tracked here:
https://bugs.chromium.org/p/chromium/issues/detail?id=375693
(I don’t see a progress here. If it fixed, please edit the answer or I will if I remember)
More Related Contents:
- Why aren’t my grid-template-areas with ASCII art not working?
- Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
- Aligning grid items across the entire row/column (like flex items can)
- Equal height rows in CSS Grid Layout
- Browser support for CSS Grid
- The difference between percentage and fr units
- Why are CSS named grid areas not in quotes?
- What is the difference between auto-fill and auto-fit?
- What is difference between justify-self, justify-items and justify-content in CSS grid?
- How to make the items in the last row consume remaining space in CSS Grid?
- A grid layout with responsive squares
- Why percentage value within grid-gap create overflow in CSS grid?
- How can I make a div span multiple rows and columns in a grid?
- What is the difference between align-items vs. align-content in Grid Layout?
- Equal height of elements inside grid item with CSS grid layout
- How to make a column span full width when a second column is not there? (CSS Grid)
- Can I have a varying number of columns per row in a CSS grid?
- Why does a grid-area name absent in grid-template-areas create additional tracks?
- Is there a “subgrid” feature, to position “grandchildren” of a grid container?
- Percentage padding / margin on grid item ignored in Firefox
- CSS Grid auto fit with max-content
- Can flex items wrap in a container with dynamic height?
- Can I make a CSS grid with dynamic number of rows or columns?
- Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
- How is “grid-template-rows: auto auto 1fr auto” interpreted?
- How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
- grid-area does not seem to work with the attr function, is this by design?
- How to center content and make the background cover the full column when using CSS Grid?
- Getting columns to wrap in CSS Grid
- Why doesn’t min-content work with auto-fill or auto-fit?