I am also a big fan of CSS Grid and I am already using it in production. I usually provide a fallback with Flexbox for IE11.
I like your post, but afaik @supports media queries aren't supported in Internet Explorer. This means that, in your examples, your fallback code would be ignored. Or did I miss something?
Also I don't think that @supports (not(display: grid)) is a valid syntax. Shouldn't it be instead @supports not (display: grid)?
@supports (not(display: grid))
@supports not (display: grid)
Also I don't think you should use autoprefixer for IE as it doesn't cover unsupported things like grid gap and auto placement
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.