Css Grid Layout Not Working in Ie11 Even With Prefixes

CSS Grid Layout not working in IE11 even with prefixes

IE11 uses an older version of the Grid specification.

The properties you are using don't exist in the older grid spec. Using prefixes makes no difference.

Here are three problems I see right off the bat.

repeat()

The repeat() function doesn't exist in the older spec, so it isn't supported by IE11.

You need to use the correct syntax, which is covered in another answer to this post, or declare all row and column lengths.

Instead of:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Use:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Older spec reference:
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

The span keyword doesn't exist in the older spec, so it isn't supported by IE11. You'll have to use the equivalent properties for these browsers.

Instead of:

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

Use:

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

Older spec reference:
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

The grid-gap property, as well as its long-hand forms grid-column-gap and grid-row-gap, don't exist in the older spec, so they aren't supported by IE11. You'll have to find another way to separate the boxes. I haven't read the entire older spec, so there may be a method. Otherwise, try margins.

grid item auto placement

There was some discussion in the old spec about grid item auto placement, but the feature was never implemented in IE11. (Auto placement of grid items is now standard in current browsers).

So unless you specifically define the placement of grid items, they will stack in cell 1,1.

Use the -ms-grid-row and -ms-grid-column properties.

• CSS Grid auto placement in IE/EDGE
• CSS Grid not working in ie11 despite prefixes
• https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

CSS Grid not workiing on IE11 or Edge even with -ms prefix

You must use -ms-grid-column and -ms-grid-row to specify for each child where it is in the grid.

.grid {  display: -ms-grid;  display: grid;  -ms-grid-columns: 200px 200px;  -ms-grid-rows: 200px 200px;  grid-template-columns: 200px 200px;  grid-template-rows: 200px 200px;}
.top-left {  -ms-grid-column: 1;  -ms-grid-row: 1;}
.top-right {  -ms-grid-column: 2;  -ms-grid-row: 1;}
.bottom-left {  -ms-grid-column: 1;  -ms-grid-row: 2;}
.bottom-right {  -ms-grid-column: 2;  -ms-grid-row: 2;}

<div class="grid">  <div class="top-left">Top Left</div>  <div class="top-right">Top Right</div>  <div class="bottom-left">Bottom Left</div>  <div class="bottom-right">Bottom Right</div></div>

.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>