I’m working on a client project and needed a simple two-column layout for article pages. Since it’s a simple layout, I thought it would be good to try out the new CSS Grid spec, just to familiarize myself with the properties and potential issues that might arise.
Having read Jen Simmons’ piece on feature queries, I thought this would be a good time to try out those as well, since I knew the support for Grid was mostly there, but not quite for the Microsoft suite.
The default layout grid features a right sidebar of 300px wide, with a flexible main area. The gutter between them is 20px. On screens up to 991px, the grid collapses. Here’s the markup:
My initial Sass used a float: left column layout and an @supports feature query to test for support of CSS Grid:
It worked great in the latest Chrome, Firefox, Safari, and even in Internet Explorer 11. I patted myself on the back and moved along with the project. But during QA, I received this foreboding bug report:
On Microsoft Edge, the sidebar menu is all kinds of funky. See attached screenshot.
Checking the screenshot and opening up the page in Edge in Browserstack revealed that the right sidebar was sitting squarely on top of my main content area.
The Edge inspector revealed that my .layout-grid was indeed getting the grid styles, but the grid styles for the old, -ms-prefixed spec.
The prefixes are coming from postCSS, so I know why that is getting added. However, I’m still not sure why Edge is detecting that it supports the un-prefixed grid spec. But, in any case, that appears to be what is happening. I decided to throw in the towel and ditch my Grid experiment.
After sleeping on it for a couple days though and listening to the latest Shoptalk Show with Jen Simmons and Rachel Andrews, I realized I might be able to detect support of the prefixed -ms-grid and conditionally apply CSS just to browsers that support the Microsoft spec.
Here’s what I ended up with:
Bazinga! It works in Edge, IE 11, and Safari, Chrome, and Firefox.