CODEWITHSUNDEEP
cssinternet-explorercss-grid
John-Robert Yrjölä
John-Robert Yrjölä

Reputation: 33

CSS Grid syntax to support IE10/11

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;
  }
}

Upvotes: 2

Views: 6708

Answers (1)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14022

@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.

Upvotes: 3

Related Questions