CSSグリッドが-msプレフィックスであってもIE11またはEdgeで動作しない

Question

IE11でグリッドを取得する際に、hereガイドに従っています。これらのルールにもかかわらず、列と行はちょうど重なり合います彼らのグリッドポジションを取るよりも。

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

：

<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; 
} 

そして、ここではそれにcodepenのリンクです

HTML：ここ

は、問題を引き起こす簡単なコード例を示します

このコードが間違っていますか、グリッドの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

ない他のブラウザと同じくらい便利... ;）