Search code examples
cssinternet-explorer-11css-grid

Why isn't my CSS Grid rendering properly in IE 11?

I have this simple grid:

body { margin: 0; }

.grid {
  -ms-grid-columns: 200px auto;
  -ms-grid-rows: 54px 53px auto;
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "navbar navbar"
    "sidebar content";
  grid-template-columns: 200px auto;
  grid-template-rows: 54px 53px auto;
}

.header {
  grid-area: header;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 2;
  background-color: orange;
}

.navbar {
  grid-area: navbar;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 2;
  background-color: lightgreen;
}

.sidebar {
  grid-area: sidebar;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  background-color: #eee;
}

.content {
  grid-area: content;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  background-color: yellow;
}
<div class="grid">
  <div class="header">header</div>
  <div class="navbar">navbar</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

I have tried to add the old Microsoft-specific CSS -ms-grid-prefixed grid properties accordingly so it is supposed to work in IE 11 as well. What I get instead is this:

IE 11 css grid result

Here's the IE11-debug codepen: https://s.codepen.io/connexo/debug/BaBLpbx/yYryLJBqwdPM

Here's the full codepen for other browsers: https://codepen.io/connexo/pen/BaBLpbx

Does anyone see what I'm missing to make this simple grid work in IE 11?

Solution

  • Okay, I was able to solve the problem.

    1. display: -ms-grid; was missing on the grid-container. Props go to @Michael_B for spotting this crucial mistake.
    2. By the looks of it auto for column/row-definitions seems to be unsupported/interpreted differently on IE 11. I simply replaced it with 1fr.

    body { margin: 0; }

.grid {
  -ms-grid-columns: 200px 1fr;
  -ms-grid-rows: 54px 53px 1fr;
  display: grid;
  display: -ms-grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "navbar navbar"
    "sidebar content";
  grid-template-columns: 200px auto;
  grid-template-rows: 54px 53px auto;
}

.header {
  grid-area: header;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 2;
  background-color: orange;
}

.navbar {
  grid-area: navbar;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 2;
  background-color: lightgreen;
}

.sidebar {
  grid-area: sidebar;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  background-color: #eee;
}

.content {
  grid-area: content;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  background-color: yellow;
}
    <div class="grid">
  <div class="header">header</div>
  <div class="navbar">navbar</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>