How to make this simple css-grid layout work in IE11

Question

I'm building a prototype for a simple 3-panels slide thing. On the second panel, I'd like to use css-grid to have a simple way to divide the panel into 4 equal and responsive areas, 100% container's height.

Here's the demo:

http://jsfiddle.net/stratboy/obnkc2x5/1/

Some of the code:

<div class="sub-grid-container">
  <div class="sub-grid-item">sub 1</div>
  <div class="sub-grid-item">sub 2</div>
  <div class="sub-grid-item">sub 3</div>
  <div class="sub-grid-item">sub 4</div>
</div>

And the relevant css:

.sub-grid-container{
  display:grid;
  height: 100%;

  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  background-color: red;
}

NOTE: I'm also using Autoprefixer, and it's compiling things like this:

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  -ms-grid-rows: 50% 50%;
      grid-template-rows: 50% 50%;
  background-color: red; }

All the code works everywhere except IE11. In IE11 I've got the 4 grid cells overlapped, and the container is mnot 100% height, nor 100% width.

I'm quite new to css grid, but I think I'm doing something really basic.. What I'm doing wrong? Or, maybe is it impossible doing it with IE11?

Answer 1

Ok, I managed to this, and it's working, along with the help of autoprefixer. Basically, on IE11 you must tell where the cells start and end with the grid-row and grid-column props. Also, to make the whole thing work with Autoprefixer, you must add grid-template prop and do not use single grid-template-columns/rows statements (this last thing is because otherwise autoprefixer won't write the cell's -ms-grid-row/column props):

.sub-grid-container {
  display: grid;
  height: 100%;
  // grid-template-columns: 50% 50%; // do not
  // grid-template-rows: 50% 50%; // do not
  grid-template:
    "a   b" 1fr
    "c   d" 1fr /
    1fr  1fr; // you can use fr units instead %
}

.cell-1 {
  grid-area: a;
}

.cell-2 {
  grid-area: b;
}

.cell-3 {
  grid-area: c;
}

.cell-4 {
  grid-area: d;
}

The autoprefixed result will be something like this:

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
      grid-template: "a   b" 1fr "c   d" 1fr / 1fr  1fr;

}

.cell-1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b;
}

.cell-3 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-4 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: d;
}