I updated the link to show the very basic method of the one we described.

After exporting the newer test project, I simply copied the main.css file into autoprefixer online and it returned the code to replace the entire css file. Since name-placement (preferred method) is being used instead of line-placement (ugly and tedious) autoprefixer seems to work very nicely for this.

Components would make this speed up quite a bit too.....

After further analysis, it appears Coffeecups powerful Site Designer may provide the key to supporting IE ms-grid spec with the help of the latest Autoprefixer as well as using the advanced CSS grid spec using @supports.

The conundrum one faces is how to support IE for the next 5 to 10 years as its just not going away soon.

Does one use a fallback to flex for IE, or does one limit the current CSS grid spec in order to use some of the features so Autoprefixer can provide the IE prefix needed. Obviously one may still want a Flex fallback too.....

With Site Designers new @supports feature, you can have a fallback, display: flex, and a display: grid-auto.

Fallback could be used for regular easy css grid designs adhering to the rules needed for Autoprefixer to work. Regular name-placement fr grid stuff. One would create the needed css for display: flex for older browers that do not understand grid or ms-grid.

If you want to use the advanced features of css grid, you would then use fallback to create a flex display for older browsers and IE. Then switch to display: grid-auto to do all the advanced features like auto-fit min max etc etc.

Here is a working example of IE first showing both flex and ms-grid layouts.

There is also utilization of the standard grid working within Autoprefixer requirements, and a advanced use of CSS grid specs for newer browsers.

http://gluexp.coffeecup.com/IEfix/index.html

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 !

So one additional caveat. It appear one can use line based placement with autoprefixer 9.4. This is BIG. Now on a single grid container you can layer and overlap items within it. I also found out you can mix line based placement with area name placement. This is BIG too.

I really do not understand what I was doing wrong before to not make it work, but it works now. I can live with this. If I discover the limitation, I will update the thread. Its enough to do lots of grid things though.

Also I can now create a support query for Display: Flex for any browser not understanding any type of grid. You will have to change it when doing the autoprefixer update to the main.css. Possibly may still have a redirect for older browser versions....but I am going to have to rethink that also now.

For Flex support if not Grid use this instead:

@supports (not (display: grid)) or (not (-ms-ime-align:auto) and (not (position:sticky)))

Its basically saying anything not grid, fallback to flex. (Includes skipping Edge 12-15 as it does have grid support)

http://gluexp.coffeecup.com/autoprefixer.html