CSS grid is awesome, but older browsers do still have issues with it. Where autoprefixers help quite a bit, they sometimes can't go all the way. For instance, gulp-autoprefixer successfully adds the IE11 prefixes to grid as necessary, however it runs into problems when you use grid-template-areas with media queries. It won't (as far as I have seen in my use of it) recalculate the row/column span of the template area, so you have to redefine it at every break. Example:
.grid{
display: grid;
grid-template-columns: 1fr 3fr 2fr 1fr;
grid-template-areas:
"header header header header"
". content sidebar ."
"ad footer footer footer";
@media screen and (max-width: 900px){
grid-template-columns: 3fr 1fr;
grid-template-areas:
"header header"
"content sidebar"
"ad ad"
"footer footer";
}
}
.main{
grid-area: content;
}
The unfortunate part is that with the above example because gulp-autoprefix transpiles the grid-template-areas to basic column/row definitions, it doesn't go back and recalculate the new start and stop values of the template area. This means that you'll have to create a media query in the .main definition in order redefine the grid template area as 'content' - exactly as it was already defined. But, because the transpiler is converting the areas to row/grid values, now it'll work properly. If you're OK with doing the extra work, don't have to worry about IE11, or find a module that does this - at which point please let me know - then grid id totally do-able now.
Personally, I do a lot of front-end work as well as back-end and I have to support IE11; to me that's a lot of extra typing that I can forget to do on every site, so I use flexbox which is handled well by gulp-autoprefixer even through media queries.