CSS Grid layout IE11 doesn't respect sizes

Question

I googled the equivalent of display:grid and grid-template-columns on IE11 but I can't manage it to work like in chrome does, what I'm doing wrong? Also I pasted my code on the snippet but the yellow bar doesn't show here

.ctn_mapa_hoteles {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 300px 790px auto;
  -ms-grid-columns: 300px 790px auto;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">
  </div>
  <div class="col_ctn_hoteles">
  </div>
  <div class="col_ctn_mapa">
  </div>
</div>

Have you seen [CSS: display: grid and/or -ms-grid](https://stackoverflow.com/questions/45124230/css-display-grid-and-or-ms-grid)? — Andrew Morton, May 28 '20 at 11:04
@AndrewMorton yes followed his instructions but got nothing :S — Raul Perez Tosa, May 28 '20 at 11:12
You are better off not using grid in ie. My recommendation would be to fallback to a flex (or table for that matter) layout in ie11. Thats is what I ended up doing. — Dejan.S, May 28 '20 at 11:16
Ie11 requires prefix but also to set each element position in the grid : https://jsbin.com/cowalifucu/1/edit?css,output — G-Cyrillus, May 28 '20 at 12:11

score 1 · Answer 1 · answered May 28 '20 at 11:37

I had this same issue. IE is not developer friendly. Both Grids and Flexbox have advantages, and I do like using Grids. To my knowledge, IE does not support Grids. Therefore, need to add a Flexbox fallback. You do this via media.

 // for IE 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

// flexbox code will go here

.yourdivclassname {
  display: inline-flex;

}

}

for all other browsers with Grid support (Firefox, Chrome, Edge, etc)

@supports (display: grid) {

.yourdivclassname {
   display: grid;

}
}

This is how I was able to keep the design of my webpages consistent across browsers. I start with the grid design. Once I have it the way I want it, I copy it to the Flexbox design and replace references to Grids with Flexbox references.

A great tutorial for Flexbox Flexbox Tutorial

A great tutorial for Grids Grids Tutorial

to turn IE11 into the flex model, it can be shorter : https://jsbin.com/xumigiluya/1/edit?html,css,output ;) — G-Cyrillus, May 28 '20 at 12:14

score 1 · Accepted Answer · answered May 28 '20 at 12:20

IE 11 requires also to tell each children where to stand inside the grid:

.ctn_mapa_hoteles {
  grid-template-columns: 300px 790px auto;
  display: grid;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
/* IE11 fix grid layout */
.ctn_mapa_hoteles {
  display: -ms-grid;
  -ms-grid-columns: 300px 790px 1fr;/* note 1fr instead auto */
}

.col_ctn_filtros {
  -ms-grid-column:1;
}

.col_ctn_hoteles {
  -ms-grid-column:2;
}

.col_ctn_mapa {
  -ms-grid-column:3;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">12
  </div>
  <div class="col_ctn_hoteles">45
  </div>
  <div class="col_ctn_mapa">78
  </div>
</div>

jsbin that can be run in IE11 : https://jsbin.com/qiwehinuwi/1/edit?html,css,output

auto-flow specifity is not avalaible, for other type of layout using auto-flow to fill up the grid, you will need to set an alternative layout for IE , here is another question with an IE11 example : Responsive Layout when using grid

CSS Grid layout IE11 doesn't respect sizes

2 Answers2