SASS adds -ms prefix to css grid, But it's not working in IE

Question

when we use sass it automatically adds prefixes for different browsers.

sass code

.grid-container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: 1fr 1fr;
}

css code

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
}

It aslo added Internet explorer prefix (-ms) for grid-columns. But Internet Explorer still don't support css grids. What does this mean? Then why it includes -ms prefix to display grid when I use sass unless IE doesn't support css grid?

Answer 1

IE needs more than the -ms- prefix with grid. IE does not have auto-flow of grid elements. If you want to make grid work in IE, you need to assign a specific grid position to each grid element.

Please refer to the sample below, it can work well in IE 11:

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

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

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

.item3 {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}

.item4 {
  -ms-grid-column: 4;
  -ms-grid-row: 1;
}

<div class="grid-container">
  <div class="item1">111</div>
  <div class="item2">222</div>
  <div class="item3">333</div>
  <div class="item4">444</div>
</div>