As of 1/30/2020 the Grid is not fully functional in IE10 or IE11.
Reading up on this, it looks like one must provide fallback function with FlexBox for these two browsers.
Any tips?
02/04/2020
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
IE is not fully compatible with CSS Grid and never will be, as that browser is not being worked on anymore.
Ironically, they were the first to implement CSS Grid back in 2011 with IE10, but it was a different, early version of the spec that has a different syntax and lacks auto-placement (so each element must have their row and column explicitly stated, or they all will stack in the first ones).
We can implement some of the grid stuff by using the -ms- prefixed, alternate syntax, and even automate that with PostCSS's Autoprefixer. In the newer version, it even provides a sort of auto-placement that relies on understanding your grid declaration + running nth-child selectors to set everything in place, but that's fragile. And still lacks the best part of Grid, which is auto fit / fill.
In my opinion, the best thing to do is simply provide any browser not supporting the current, stable spec of Grid with a blocky layout. Which is kind of what we usually do with mobile layouts anyway. Just let the browser dafaults take over, and not complicate things trying to make a flex fallback.
Here's a great article series by Dan Tonon on CSS Grid in IE