The challenge is Microsoft Edge, the only modern browser that, as of this writing, still uses the old grid specification. It returns
true
for@supports (display: grid) {}
, even though its grid support is spotty and non-standard. Most relevant for our example is the lack of support for thegrid-template-areas
andgrid-area
properties and for theminmax()
function. As a result, a feature query targetingdisplay: grid
would not exclude Microsoft Edge, and users of this browser would be served a broken layout. To resolve this issue and serve up grid layouts to Microsoft Edge only when the browser gets full support for the specification, target one of the unsupported features instead:
Code language: CSS
@supports (grid-area: auto) {}