[html] CSS Grid Layout not working in IE11 even with prefixes

I'm using following HTML markup for my grid.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

The SCSS code is something like below:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

Since I'm using auto-prefixer in my workflow it automatically adds all relevant properties with -ms prefix. I can confirm it via inspect element.

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to this site these browsers support CSS Grid layout with -ms prefix. I've created a CodePen for this scenario.

CodePen Link

Why is it not working?

.grid {_x000D_
  display: -ms-grid;_x000D_
  display: grid;_x000D_
  -ms-grid-columns: (1fr)[4];_x000D_
  grid-template-columns: repeat(4, 1fr);_x000D_
  -ms-grid-rows: (270px)[4];_x000D_
  grid-template-rows: repeat(4, 270px);_x000D_
  grid-gap: 30px;_x000D_
}_x000D_
_x000D_
.grid .grid-item {_x000D_
  background-color: #000;_x000D_
  color: #fff;_x000D_
  text-align: center;_x000D_
  line-height: 270px;_x000D_
}_x000D_
_x000D_
.grid .grid-item.height-2x {_x000D_
  -ms-grid-row: span 2;_x000D_
  grid-row: span 2;_x000D_
}_x000D_
_x000D_
.grid .grid-item.width-2x {_x000D_
  -ms-grid-column: span 2;_x000D_
  grid-column: span 2;_x000D_
}

<section class="grid">_x000D_
  <article class="grid-item width-2x height-2x">....</article>_x000D_
  <article class="grid-item">....</article>_x000D_
  <article class="grid-item">....</article>_x000D_
  <article class="grid-item width-2x">....</article>_x000D_
  <article class="grid-item height-2x">....</article>_x000D_
  <article class="grid-item">....</article>_x000D_
  <article class="grid-item">....</article>_x000D_
  <article class="grid-item width-2x height-2x">....</article>_x000D_
</section>

To support IE11 with auto-placement, I converted grid to table layout every time I used the grid layout in 1 dimension only. I also used margin instead of grid-gap.

The result is the same, see how you can do it here https://jsfiddle.net/hp95z6v1/3/

The answer has been given by Faisal Khurshid and Michael_B already.
This is just an attempt to make a possible solution more obvious.

For IE11 and below you need to enable grid's older specification in the parent div e.g. body or like here "grid" like so:

.grid-parent{display:-ms-grid;}

then define the amount and width of the columns and rows like e.g. so:

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;
}

finally you need to explicitly tell the browser where your element (item) should be placed in e.g. like so:

.grid-item-1{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.grid-item-2{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

Michael has given a very comprehensive answer, but I'd like to point out a few things which you can still do to be able to use grids in IE in a nearly painless way.

The repeat functionality is supported

You can still use the repeat functionality, it's just hiding behind a different syntax. Instead of writing repeat(4, 1fr), you have to write (1fr)[4]. That's it. See this series of articles for the current state of affairs: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Supporting grid-gap

Grid gaps are supported in all browsers except IE. So you can use the @supports at-rule to set the grid-gaps conditionally for all new browsers:

Example:

.grid {
  display: grid;
}
.item {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
  .grid {
    grid-gap: 1rem;
  }
  .item {
    margin-right: 0;
    margin-bottom: 0;
  }
}

It's a little verbose, but on the plus side, you don't have to give up grids altogether just to support IE.

Use Autoprefixer

I can't stress this enough - half the pain of grids is solved just be using autoprefixer in your build step. Write your CSS in a standards-complaint way, and just let autoprefixer do it's job transforming all older spec properties automatically. When you decide you don't want to support IE, just change one line in the browserlist config and you'll have removed all IE-specific code from your built files.