即使使用-ms前缀,CSS Grid也无法在IE11或Edge上运行

Question

我一直在关注导向这里对IE 11的工作越来越电网我的问题是,即使下面的这些规则,列和行只是相互重叠而不是把自己的发车位置.

这是一个简单的代码示例,会导致问题:

HTML

<div class="grid">
  <div>Top Left</div>
  <div>Top Right</div>
  <div>Bottom Left</div>
  <div>Bottom Right</div>
</div>

CSS

.grid {
  display: -ms-grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
}

这是一个代码链接到它:

https://codepen.io/anon/pen/pdNWMj

我是否错误地使用了此代码,或者我应该使用除网格的ms实现之外的其他内容？

Answer 1

您必须使用-ms-grid-column和-ms-grid-row为每个孩子指定它在网格中的位置.

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

https://codepen.io/anon/pen/ZaBaVa

不像其他浏览器那么方便...希望这有助于;)