CSS: display: grid and/or -ms-grid

Transforming new CSS Grid layout syntax to outdated IE's is really a challenge. It's not just a matter of adding some vendor prefixes.

IE has very limited support of what is present in the new version of CSS Grid Layout. There is no IE support of

• auto-placement and selecting its flow (grid-auto-flow CSS property);
• repeated columns/rows (repeat function and some special values like auto-fill and auto-fit). In some cases this mean that you'll just have to replace with explicit values, like in your case, you can replace grid-template-columns: repeat(4, 1fr) with -ms-grid-columns: 1fr 1fr 1fr 1fr and this will work perfectly. But if you have something like grid-template-columns: repeat(auto-fill, 1fr) it's impossible to implement this in IE;
• grid cell gaps (grid-row-gap, grid-column-gap, grid-gap CSS properties). Gaps can be faked using additional grid tracks;
• automatically generated tracks (grid-auto-columns, grid-auto-rows CSS properties);
• named grid areas (grid-area, grid-template-areas CSS properties).

You just have to forget about this possibilities for IE.

Also some values of supported IE properties are not supported

Autoplacement

There is no auto-placement behavior in IE implementation. This means that you have to position everything rather than use the auto-placement ability of grid.

If you don’t position items they will stack up in the first cell of the grid. That means that you have to set a position explicitly for every single grid item or it will reside in the first cell. If you have markup like this:

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

You'll see something this in IE

So basically you have two options (methodologies) when developing CSS Grid for IE (if you know that the layout in your case can be transformed):

• Generate different markup for IE browser and other browsers. In this case you don't care about markup similarity (by the way your value of grid-template-rows: repeat(150px, 50px) is invalid, so I assume you wanted grid-template-rows: 150px 50px). Demo for your case

  .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px 50px;
    grid-gap: 1vw;
    
    display: -ms-grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  /* Explicit placement for IE */
  /* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }

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

• Generate very similar markup for IE browsers. In this case, markup for all browsers will look very similar. This might be more maintainable because you shouldn't care about different approaches. Demo for your case:

  .container {
    display: -ms-grid;
    display: grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
    grid-template-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
    grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 7;
    grid-column: 7;
  }

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

Your display rule needs to be structured correctly. What you have is invalid.

display: grid -ms-grid;

Also, your grid-template-rows rule is invalid. The first argument is supposed to be an integer that specifies the number of repetitions.

grid-template-rows: repeat(150px, 50px);

Also, I don't believe the repeat() notation existed in the older specs. It looks like it was introduced in the current spec, so IE wouldn't support it.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

Lastly, it's best to put the official (W3C) properties after the prefixed versions so they are given priority in the cascade (more details).

Try this:

.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}