【CSS】 Grid LayoutのIE11対応のまとめ

4732 ワード
CSS CSS3 IE11 CSS テキストリンク

CSS Grid Layoutレイアウトに便利なCSSですが、IE用の実装が癖があります。
そこでIEに使用したソースをまとめて見たいと思います。
ちなみにIEでもIE11にしか対応していないのでIE10以下は使用できません。

css gridの実装状況

通常の実装

<div class="wrap">
    <header>ヘッダー</header>
    <div class="contents">コンテンツ</div>
    <div class="sidebar">サイドバー</div>
    <footer>フッター</footer>
</div>


.wrap {
  display: grid;
  grid-template-rows: 45px 1fr 45px;
  grid-template-columns: 1fr 25px;
}
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/