Supporting all browsers when working with CSS Grid

I have found my self using CSS Grid in every project. And in most cases, IE, Opera Mini, etc support is not required but is good to have. Most of my clients are either in travel or corporate industries, and my target audiences use browsers that do not support CSS Grid.

Even when browser support globally is above 85%, and can be even more region vice, you don’t want someone to navigate to your client’s website on IE or other browsers that do not support, and find a jumbled up mess of text and images do you? Especially when you can support those unsupported with a few lines of code.

I think, from what people are writing on the web about browser compatibility and starting from a basic single column layout when using CSS Grid, the single column fallback will be the right way going forward.

You can create a single column layout with just two or three CSS declarations. For example:

.foo {
    width 100%;
    max-width: 650px;
    margin: 0 auto;
}

This simple declaration block will give you a nice centre aligned block on the viewport. You can simply override it on grid supported browsers using @supports. Be careful though, I have seen that when you declare display: grid, depending on the CSS processor setup you use, you may end up with -ms-grid in your compiled CSS file, and cause some unwanted issues on Microsoft browsers.

.foo {
    ...
    @supports(display: grid) {
        max-width: none;
        margin: unset;
        ...
    }
}

If you use CSS Grid without vendor prefix added by you or your compiler, however, display: grid property will be ignored by browsers that do not support it. Browsers are built to ignore CSS they don’t understand.

I don’t think that you should invest any more time than that to create fallbacks using other old CSS layout techniques like display: table-cell or floats to create layouts that appear similar to your CSS Grid layout, unless a large percentage of your target users use browsers that do not support Grid. The reason being, that the unsupported browser percentage is shrinking every day.