Accurately checking for CSS Grid support in Microsoft Edge

May 10, 2017

Edge is updating it’s implementation of CSS Grid. YAY! I was thrilled to fire up a test build and take it for a spin and check out a few of the most common CSS Grid demos as a good first pass at real life scenarios.

Then I hopped over to a great repo set up by Rachel Andrew that shows live sites using CSS Grid.

I discovered something unfortunate while looking at Bryan Robinson’s awesome portfolio site. It didn’t look like a grid layout. I then check his site in Firefox, and bam, - it looks great. Something was up.

Image of Bryan Robinson's site without grid

Looking at the code I see this:

@supports(display: grid) and (not(display: -ms-grid)) { /* grid code here */ }

While I get the purpose of this, IE’s implementation of grid is not a direct 1:1 of the standardized CSS Grid. Unfortunately this makes it so that Edge will NOT go into this support block at all, because we will support both display: grid and display: -ms-grid when Edge ships.

The solution, just display: grid

So to make this work, we don’t want to focus on -ms-grid at all, but harness the power of any of the other standard approach such as display: grid or any other grid-template-* properties added to the spec. For example:

@supports(display: grid) { /* will return true for any browser supporting the spec */ }

Bryan was awesome and updated his site about five minutes after we spoke on twitter and it now looks great.

Image of Bryan Robinson's site with accurate grid support check

What’s Grid?

Just in case you read this whole post and don’t know what CSS Grid is and what all the hype is about. Learn more about this awesome layout capability coming to a browser near you.

Update