This seems to offer better support (polyfill) than previous versions for IE such that one can utilize grid area placement by names instead of line placement.

Has anyone else tried this out and would it be better for basic layouts to use than a fallback method with flex ?

Here is just a experimental link to the test project.

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

Basically all I did was define two different grid layouts for different breakpoints. Exported project, then opened the main.css file and ran Autoprefixer in Sublime Text to add the IE prefix(s).

Should note also that I did have to make sure the css for the named Grid Area Placements had to be changed at the larger breakpoint to another value and back again to "store" the css in SDv3 for the higher breakpoint. (That was tripping me up.)

Obviously a basic example - not even sure one could use this in production....but has me thinking its a whole lot easier than creating a fallback for the IE ?

On reading the first post in this thread immediately after the latest update to SD V3, I started looking for this new facility in the update - it was, of course, just my ignorance and a coincidence of timing. Having now read https://css-tricks.com/autoprefixer/ I see that this facility, external to SD V3, could indeed prove useful in the way Twinstream says.

I think one would have to be very careful in checking -
1. how well it is likely to fit with the settings one is likely to make for CSS Grid in SD V3: there are a lot of things to consider according to the latter half of the article here;
2. whether one is likely to need to edit the website later in RSD: presumably one would need to remember the considerations in item 1 above, to re-run Autoprefixer, and do considerable rechecking to ensure that everything still works as it is meant to.

Frank

Its lack of support for grid-gap and some of the additional things you reference in the article make this unfortunately too challenging to use.

I should correct my statement concerning the lack of support for "grid-gap" with the latest Autoprefixer. When testing using the Autoprefixer package in Sublime Text 3 for some reason it does not update the gap setting. I believe this is do to a earlier version of Autoprefixer being installed in Sublime.

If I use the Autoprefixer CSS online tool to update, it does make the added prefix changes for "grid-gap" (grid-row-gap, grid-column-gap).

I am going to have another look at this again....just because I forgot how fun and easy it is to design layouts using the Grid Editor.

Update: I updated the previous example which now uses no custom css code.....

Purely Hypothetical but....one could make the argument to design all grid in fallback mode. On export use the newest autoprefixer to add support for ms-grid IE 10, IE11, and Edge up to 15. If one could remove the updated code for -ms only to a custom ie10etc.css stylesheet (using diff, compare, merge ?) you could then link to it in your head from your resources. It would be easy to remove support at some point for those browsers (IE 10 etc) when Microsoft makes its next move.

That would leave browsers that do not understand any grid, but do understand flex. That could be added as a @ supports rule of "not (grid) or (-ms-grid)". Once the lifespan of that rule expired below your measured audience (<1%) ? one could remove that rule also.

This keeps the design driven by display: grid which is the emerging market.

So....what comes first ? The chicken or the egg ?

The important question is perhaps not which came first, but how can we kill off several generations of chickens of numerous different breeds which refuse to die, and get one excellent standard chicken.

I wonder whether CoffeeCup's new Holographic Site Designer with Automatic Language Translation will be in use long before we can stop catering for IE 11, and whether an Autoprefixer on steroids will be required.

Frank

PS. Are there any reliable statistics of what percentage of websites use CSS Grid Layout?

I hope the Holographic Site Designer also comes with a Drone controlled mouse.....

Actually the mention of Holographic got me thinking about a possible solution to one of the issues I ran into using autoprefixer.

It seems that when one gets into the advanced layering of elements, each one can share grid space with another if one uses the line placement method. By simply adjusting the z-index you can over lap one on top of the other.

When you define all the grid areas with labels or names, you will not be able to "share" space anymore. The newer autoprefixer "requires" this (labels) because that is the only way to "calculate" the position and number of elements on the defined grid.

If one thought of individual "z-index" layers of "shared common elements" that do not overlap, autoprefixer might be able to do what it is intended, and still allow the advanced method of overlap needed for complicated designs.

I guess that's practical now in SD V3. Each layer can be a container having a width of 100vw. The second and subsequent layers would have a fixed position (top 0, left 0), and have ascending z-indexes. This seems to have almost endless positioning/overlap possibilities for the contents of the page without the use of multiple negative margins etc.

I suspect that other users have been doing this for ages, but it hadn't occurred to me. My thanks to Twinstream for drawing my attention to what looks like a promising layout technique in SD V3.

It also suggests to me the possibility of such 'container layers' (saved as components) as the equivalent of desktop-publishing Master pages - or am I perhaps getting into the realms of fantasy and too far off topic?

Frank