Grid does not work in IE 11

[bartaz]

Browser support page claims Vanilla is actively tested in IE 11.
This doesn't seem to be true.

Recently introduced CSS grid is not supported by IE and does not work properly.

In most basic case grid elements are just rendered one under another (which could be considered graceful degradation):

But there are cases (like snapcraft.io), where Vanilla grid breaks completely making content of the page unreadable:

Expected behavior
We should make sure that all the components are tested in browsers that we claim they are.
Ideally we should make the grid work in IE 11 (by applying polyfill or fallback syntax - IE 11 seems to be supporting old CSS grid syntax, so maybe autoprefixer can be used to make it work?).

If we don't want to support IE 11 and older versions, we should stop claiming the support on the website.

Desktop (please complete the following information):

• OS: Windows
• Browser IE 11

[lyubomir-popov]

I can address the prefixing part of this. I've created a separate issue for it.

[bartaz]

It seems we can't simply prefix the grid for IE because of lack of support for autoplacement.

We should discuss how to approach fixing the grid for IE.

[bartaz]

WG:

• investigate when it breaks in IE11
• use supports to detect support for grid and provide flexbox implementation for columns
  • if real grid support is hard to maintain, simplyfy the view
• discuss testing in IE11 to make sure we keep supporting it