IE上のフル・ハイトのCSSグリッド・レイアウト

Question

私はCSSレイ・レイアウトを偉大なレイチェル・アンドリュースによって使い始めました。私は理解できません。どうすればラッパーを伸ばすことができますか？私はbook から彼女の最初の例を使用しています。少し変更してのフルハイトのCSSグリッドレイアウトの準備をしています。

これはChrome、FF、Safari、Operaで完璧に機能しますが、IEでは完全な高さを埋め込むことはできません。グリッドシステム（-ms-）にIEプレフィックスを使用していますが、すべてが機能しますが、完全な高さはありません。また jsfiddleが取り組んでいる

.wrapper { 
 
    display: grid; 
 
    display: -ms-grid; 
 
    grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px; 
 
    -ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px; 
 
    grid-template-rows: 12px auto 12px auto 12px; 
 
    -ms-grid-rows: 12px auto 12px auto 12px; 
 
    background-color: #fff; 
 
    color: #444; 
 
    height: 100vh; 
 
} 
 

 
.box { 
 
    background-color: rgb(120, 70, 123); 
 
    border: 5px solid rgb(88, 55, 112); 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif; 
 
} 
 

 
.a { 
 
    grid-column: 2/3; 
 
    grid-row: 2/5; 
 
    -ms-grid-column: 2; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 3; 
 
} 
 

 
.b { 
 
    grid-column: 4/7; 
 
    grid-row: 2/3; 
 
    -ms-grid-column: 4; 
 
    -ms-grid-column-span: 3; 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 1; 
 
} 
 

 
.c { 
 
    grid-column: 4/5; 
 
    grid-row: 4/5; 
 
    -ms-grid-column: 4; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 4; 
 
    -ms-grid-row-span: 1; 
 
} 
 

 
.d { 
 
    grid-column: 6/7; 
 
    grid-row: 4/5; 
 
    -ms-grid-column: 6; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 4; 
 
    -ms-grid-row-span: 1; 
 
}

<div class="wrapper"> 
 
    <div class="box a">A</div> 
 
    <div class="box b">B</div> 
 
    <div class="box c">C</div> 
 
    <div class="box d">D</div> 
 
</div>

：CSSグリッドスペックがhttps://jsfiddle.net/v7d641jb/

（あなたは全体の一例にそのここhttp://legie.kirril.com/www/grid/index.htmlを確認したい場合）

Answer 1

（the older one which is supported by IE ）はgrid-rowsの値をautoと定義しています。明らかにIEで動作していません。

簡単な解決策は、autoを1frに置き換えることです。

の代わりに、この：あなたは完全にグリッドhttps://jsfiddle.net/v7d641jb/を埋めるために使用1FR代わりに自動も

-ms-grid-rows: 12px 1fr 12px 1fr 12px; 

revised fiddle