Edge - Stacking grid items on top of one another

[matchboxhero]

I've created a grid in CSS using progressive enhancement to use inline-block, then flexbox and then CSS Grid. The system works in all browsers except for Microsoft Edge.

In Edge the grid items are being stacked on top on one another. The code I have for CSS Grid is written inside a @supports tag which Edge seems to think it supports.

I'm not entirely sure where the problem is occurring or if the problem is part of my codebase but it works across all of the other modern browsers.

https://codepen.io/matchboxhero/pen/OjEWqV?editors=1100

[rachelandrew]

Current Edge does not support grid layout, but instead the prefixed older version of the spec.

For any future issue, please provide a Reduced Test Case.

[matchboxhero]

Thank you for your reply.

I understand that it's still using the prefixed version but then is it not a bug that @supports(display:grid) is set to true in edge when it doesn't work. What's the point in having feature detection in CSS if the browsers are going to return false positives.

Apologies, I know it's not your fault, it's just annoying that the only browser it doesn't work in is Edge and it's because it 'thinks' it is supports grid.

Maybe I'm missing something? 🤔

[rachelandrew]

I would suggest posting somewhere like Stack Overflow, with a reduced test case.

[matchboxhero]

Thanks