IEとEdgeでCSSグリッドが動作しないのはなぜですか？

Question

は、私はこのような構造を持つグリッドをやっている：我々はそれを見る場合https://codepen.io/anon/pen/PEpYoy

.grid-list { 
 
\t padding: 0; 
 
\t display: -ms-grid; 
 
\t display: grid; 
 
\t list-style: none; 
 
\t -ms-grid-columns: 1fr 1fr 1fr 1fr; 
 
\t grid-template-columns: 1fr 1fr 1fr 1fr; 
 
\t grid-auto-rows: 1fr; 
 
\t grid-gap: 0.625rem; 
 
} 
 

 
.grid-list li a { 
 
    background-color: 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t display: -webkit-box; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
\t -webkit-box-orient: vertical; 
 
\t -webkit-box-direction: normal; 
 
\t -ms-flex-direction: column; 
 
\t flex-direction: column; 
 
\t height: 100%; 
 
\t transition: border-color .2s ease-out; 
 
\t padding: 3px; 
 
\t padding: 0.1875rem; 
 
}

<ul class="grid-list"> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>1</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>2</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>3</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>4</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>5</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>6</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>7</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>8</h3> 
 
\t \t </a> 
 
\t </li> 
 
</ul>

：

私は次の非常に基本的なコードを持っていますchrome/firefoxはうまく動作しますが、IEやEdgeでグリッドを開くと、グリッドは次のように重なっています：

これについてのご意見はありますか？

Answer 1

CSSグリッドは、IE v11 and Edge 15で部分的にのみサポートされています。この構造は非常に実験的なので、注意して使用してください。

人々はフレックスをフォールバックとして使用する方法を見つけましたが、このソリューションでさえ、古いブラウザでは変動する可能性があります。 codepen demo

@supports not (display: grid) { 
.grid { 
    display: flex; 
    flex-flow: row wrap; 
    ... 
}