CSS-grid is a great layout that can help you create more concise and flexible grids in CSS...  however, like most web-based technologies, if you decide to start using them, you need to think about older browser support.  I've built a few sites using CSS grid and most of the time everything goes great, however, like all things, when you throw IE into the mix it is highly likely you will need to write some custom styles.  In this tutorial, you will learn a few strategies which will make your IE files with CSS-grid hopefully less painful.

Autoprefixer Is Your Friend

If you want to use CSS-grid, then you will need to use a build tool, like web pack to add in all the required polyfills and polyfills to support older browsers. To make life easier, I suggest you look at integrating post-css and autoprefixer.  When building your CSS, auto prefixer will compile your CSS and then add in supported browser prefixes.  In one example if autoprefixer found this style:

.myClass {
   display: grid;
}

Into...

.myClass {
   display: grid;
   display: -ms-grid;
}

As IE transpiling is hit and miss, Autoprefix by default will have the IE polyfill disabled. To enable it, within your config, you need to enable it. How and where you do this will depend on your build, tools, etc but hopefully, this snippet will point you in the right direction:

module.exports = () => {
    return {
        plugins: [
            require('autoprefixer')({
                        grid: false
                })
        ]
    };
};

After enabling auto-prefixer, you should compile your CSS and see if that fixes it. If you get lucky everything will work... if not, then read on.

Grid Vs Flexbox

Just because you have auto-prefixer enabled, your website still might look broken. From my experience, the bits that usually break are the bits where you have an unknown number of elements. When you use grids with IE, IE doesn't really know how to deal with auto placements of elements well. What I mean is. if you create a grid which will always have 3 columns and 3 rows, then grids will work.

In these situations, if auto-prefixing hasn't worked all you really need to do is explicitly define the grid, like so:

        .box1 {
            order: 1;

            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }

        .box2 {
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }

        .box3 {
            order: 3;

            -ms-grid-row: 3;
            -ms-grid-column: 1;
        }

        .box4 {
            order: 4;

            -ms-grid-row: 4;
            -ms-grid-column: 1;
        }

IE usually fails to render correctly because it doesn't know where to put something. Most IE issues I've encountered have mainly been items rendering on top of each other. If you explicitly define IE row and column positions, then this will usually get your site looking OK.

Grids With Dynamic Items

The above tip works great if you have a known amount of items you are working with. If you have an unknown number of items, then you won't be able to do this.  Let's say you have an order history page.  Users will have an unknown number of orders, what do you do?  In these situations, I've found it's best to use Flexbox.

The approach I tend to favour is to not use grids in these situations at all. If you work in a team, this may cause contention. Another approach might be to write your own IE media query, that renders a flex grid, like so:

    .list {
        display: grid;
        grid-template-columns: 4fr;

        @media (-ms-high-contrast: active), (-ms-high-contrast: none) {
            display: flex;
            flex-wrap: wrap;

            & > * {
                flex: 0 0 25%;
            }
        }
    }

In this approach, you write IE specific styles and use the IE specific media query (-ms-high-contrast: active), (-ms-high-contrast: none) to render out a flexbox based grid instead. Personally, I think the cleanest code approach is to just use flexbox and have one solution that works in all cases, rather than having different styles for different browsers.

The counter to that argument is that deleting of IE conditions after IE is no longer required to be supported, is cheaper than moving from flex back to a grid.

Whichever approach you favour, at least there's a solution to float your boat. I hope this article has helped make your life with IE a little less painful, enjoy!