CSS Grid syntax to support IE10/11

Question

How can I support Grid Layout for IE10 and/or IE11?

So far I have only found that the -ms- prefix should do the trick, but I can only get it to work on Edge browser.

I have tried to look in the Microsoft docs, and MDN network but can't find anything to help.

Below you can find the code I used:

@supports (display:grid) {
  .App-body {
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-areas: "navbar  navbar  navbar" "leftside content content";
  }

  .leftside {
    grid-area: leftside;
    /*align-content: left;*/
  }

  .rightside {
    grid-area: rightside;
    /*align-content: right;*/
  }

  .content {
    grid-area: content;
    /*align-content: center;*/
  }

  .navbar {
    grid-area: navbar;
  }
}

@supports (display:-ms-grid) {
  .App-body {
    display: -ms-grid;
    -ms-grid-columns: 300px auto 300px;
  }

  .leftside {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    /*align-content: left;*/
  }

  .rightside {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    /*align-content: right;*/
  }

  .content {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .navbar {
    -ms-grid-row: 1;
    -ms-grid-column-span: 3;
  }
}

Vadim Ovchinnikov · Accepted Answer · 2017-08-04T06:00:59.723

3

@supports CSS rule is not supported by Internet Explorer, so you need to remove it to make it work.

Also rules grid-template-columns: 300px auto 300px; and -ms-grid-columns: 300px auto 300px; are not equivalent for IE/Edge and other browsers supporting grid:

Replace auto with 1fr if you want column to take all remaining space.
Replace display: grid with display: inline-grid for grid-container (display: -ms-grid for IE\Edge) if you want column width to be defined by content.

By the way you can remove -ms-grid-column: 1 and -ms-grid-row: 1 for IE/Edge because it's default values for IE/Edge. IE/Edge doesn't have grid item autoplacement and by default IE/Edge stacks all grid items in first cell.

edited Aug 04 '17 at 06:00

answered Aug 03 '17 at 12:28

Vadim Ovchinnikov

13,327
5
62
90

Thank you, I found this alternative: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} , thru https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet – John-Robert Yrjölä Aug 03 '17 at 12:57
@John-RobertYrjölä Yes, this is an option but you can just omit this CSS rules and media queries because CSS grid layout for IE/Edge won't affect other browsers and vice versa. – Vadim Ovchinnikov Aug 03 '17 at 13:09
However I tried the 1fr solution to replace auto, but at least in IE11 auto seems to work better. It leaves a min size to fit content. – John-Robert Yrjölä Aug 03 '17 at 13:19
@John-RobertYrjölä Yes, in other browsers `auto` is equivalent to `minmax(min-content, max-content)`. And it tries to occupy maximum if possible. – Vadim Ovchinnikov Aug 03 '17 at 13:28

CSS Grid syntax to support IE10/11

1 Answers1