CSS Grid Layoutレイアウトに便利なCSSですが、IE用の実装が癖があります。
そこでIEに使用したソースをまとめて見たいと思います。
ちなみにIEでもIE11にしか対応していないのでIE10以下は使用できません。
通常の実装
<divclass="wrap"><header>ヘッダー</header><divclass="contents">コンテンツ</div><divclass="sidebar">サイドバー</div><footer>フッター</footer></div>.wrap{display:grid;grid-template-rows:45px1fr45px;grid-template-columns:1fr25px;}header{grid-row:1/2;grid-column:1/3;}.contents{grid-row:2/3;grid-column:1/2;}.sidebar{grid-row:2/3;grid-column:2/3;}footer{grid-row:3/4;grid-column:1/3;}上記のソースでこのようなレイアウトが作れます。
しかしIEはこれでは表示してくれません。
IEの実装
.wrap {
display: -ms-grid;
display: grid;
-ms-grid-rows: 45px 1fr 45px;
grid-template-rows: 45px 1fr 45px;
-ms-grid-template-columns: 1fr 25px;
grid-template-columns: 1fr 25px;
}
header {
-ms-grid-row: 1;
grid-row: 1 / 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / 3;
}
.contents {
-ms-grid-row: 2;
grid-row: 2 / 3;
-ms-grid-column: 1;
grid-column: 1 / 2;
}
.sidebar {
-ms-grid-row: 2;
grid-row: 2 / 3;
-ms-grid-column: 2;
grid-column: 2 / 3;
}
footer {
-ms-grid-row: 3;
grid-row: 3 / 4;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / 3;
}
すごくややこしいですね。
最近Autoprefixerが進化したようなのでこの辺の記述も楽になってきたようです。
https://autoprefixer.github.io/