IE10/11をサポートするCSSグリッド構文

Question

IE10および/またはIE11のグリッドレイアウトをサポートするにはどうすればよいですか？

これまでのところ、-ms-という接頭辞がトリックを行う必要があることがわかりましたが、Edgeブラウザでしか動作しません。

私はMicrosoftのドキュメントとMDNネットワークを調べようとしましたが、何か助けになるものは見つかりませんでした。あなたは、コードを見ることができます

は、私が使用：あなたはそれを動作させるためにそれを削除する必要があるので、

@supports (display:grid) { 
    .App-body { 
    display: grid; 
    grid-template-columns: 300px auto 300px; 
    grid-template-areas: "navbar navbar navbar" "leftside content content"; 
    } 

    .leftside { 
    grid-area: leftside; 
    /*align-content: left;*/ 
    } 

    .rightside { 
    grid-area: rightside; 
    /*align-content: right;*/ 
    } 

    .content { 
    grid-area: content; 
    /*align-content: center;*/ 
    } 

    .navbar { 
    grid-area: navbar; 
    } 
} 

@supports (display:-ms-grid) { 
    .App-body { 
    display: -ms-grid; 
    -ms-grid-columns: 300px auto 300px; 
    } 

    .leftside { 
    -ms-grid-row: 2; 
    -ms-grid-column: 1; 
    /*align-content: left;*/ 
    } 

    .rightside { 
    -ms-grid-row: 2; 
    -ms-grid-column: 3; 
    /*align-content: right;*/ 
    } 

    .content { 
    -ms-grid-row: 2; 
    -ms-grid-column: 2; 
    } 

    .navbar { 
    -ms-grid-row: 1; 
    -ms-grid-column-span: 3; 
    } 
} 

Answer 1

@supports CSSルールは、Internet Explorerでサポートされていません。

もgrid-template-columns: 300px auto 300px;と-ms-grid-columns: 300px auto 300px;はIE /エッジおよびグリッドをサポートする他のブラウザのために等価ではありません。ルール：あなたは残りのすべての スペースを取るために列をしたい場合は

• は1frとautoを交換してください。あなたは、列幅はコンテンツによって定義されたことにしたい場合は

• （IE \ Edgeのdisplay: -ms-grid）グリッドコンテナ用display: inline-gridでdisplay: gridを交換してください。それはIE /エッジのデフォルト値ですので、あなたがIE/EDGE用-ms-grid-column: 1と-ms-grid-row: 1を削除することができところで

。 IE/Edgeにはグリッド項目の自動配置がなく、デフォルトではすべてのグリッド項目が最初のセルにスタックされます。