html - CSS Grid 布局 IE11 不考虑大小

Question

我在 IE11 上搜索了 display:grid 和 grid-template-columns 的等价物，但我无法像在 chrome 中那样管理它，我做错了什么？我还把我的代码粘贴到了代码段上，但黄色条没有显示在这里

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

Answer 1

IE 11 还需要告诉每个 child 站在网格内的位置:

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

可以在IE11下运行的jsbin: https://jsbin.com/qiwehinuwi/1/edit?html,css,output

自动流特性不可用，对于使用自动流填充网格的其他类型的布局，您需要为 IE 设置替代布局，这里是另一个问题，以 IE11 为例: Responsive Layout when using grid