My final testing on using Autoprefixer with Grid. I have changed this link quite a few times as I did different test configurations.
http://gluexp.coffeecup.com/IEfix/index.html
Autoprefixer added a rule that if you have a @supports that defines a grid style (such as grid-area: auto) it will not process anything in that @supports. Mainly because it does not understand auto in the Grid world.
This allows one to setup a rule where you can use the full on Grid spec without any limitation. That is what I want too...
If you setup another @support rule (display: grid) Autoprefixer will add the -ms-grid needed as long as you follow the rules the Autoprefixer defines. Mainly name-placement only. You can actually accomplish quite a bit with this technique.
With those two rules, you can target all the grid browsers including IE10 and IE11, Edge 12-15 (-ms-grid spec) and then all the other browsers that support the regular grid.
Since one has to open the main.css file and cut and paste into autoprefixer, its not too hard to make a few adjustments to the code after you have updated it. Add the targeting required for IE10 and IE11 to replace the @supports display:grid and then duplicate that for targeting the Edge 12-15 also. Its simple to do really.
Add a redirect for any browser that does not support grid to a simple landing page.
Now you can design in grid the way you want for advanced browsers. Converting the layout to a -ms-grid spec is easier than trying to go back to a flex layout because flex is a different animal. Still use flex....just not for layout.
One can simply move the @supports feature queries up or down for browser test viewing also. Not going to show up on IE but at least if you need animation transition testing, it helps.
Thats all folks !
Bootstrap 5 CSS Grid.