display:gridのIE11対応について

はじめに

とある案件でdisplay:gridを使用する機会があり、IE11対応のdisplay:gridで半日ほど持っていかれたので、今後の自分の為の備忘録的なものです。

Autoprefixer

タスクランナーである程度は補完してくれるのですが、grid:grapだったり、justify-content:center等はIE11の補完がうまくいきませんでした。
タスクランナーでもjustify-content:centerの補完ができない等のエラーメッセージ...
他の色々なサイトを物色しましたが、力技で対応する策しかなかったので泣く泣くflexでSPのページは対応しました...

-ms-

IEのベンダープレフィックスですが、grid-template-rowやgrid-template-columnの対応がバリデートのエラーで引っかかりました。

-ms-grid-rows: (50px)[3];
grid-template-rows: repeat(3, 50px);

と吐き出されていました。
どうやら(50px)[3]の書き方だと正しく表示されないみたいですね。

-ms-grid-rows: 50px 50px 50px;
grid-template-rows: repeat(3, 50px);

上記の記述ではうまく動作したので、こちらで対応したという形ですね。。。

gridはやっぱりIE対応がネックですね...
ですが、ちょっとしたややこしいレイアウトもgridひとつで対応できてしまうのはすごく便利ですね。
gridを使用する際は、IEにお気をつけて！（戒め）