はじめに
とある案件で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にお気をつけて！（戒め）