CSS Grid Layout はIE/Edgeで何とかなるのか？という声が多い件

一昨日書いた CSS Talk vol.3 において、私のセッション後の質疑応答やアンケートの意見で「IEだとしんどいのか」「IEって結局非対応？」という声が非常に多かったです。

IEのシェアは世界規模だと1割を切っている所まで低下していますが日本だとまだまだ多く(3月現在で約24％・StatCounter調べ)、Webサイト制作やアプリ開発などで気にされる方もまだまだ多いようです。

ということで、IE/Edgeでの対応について改めて調べ直しました。

……先に結論。

相当しんどい。

Microsoftのサイトの「グリッドレイアウト」を見るとIE10からの対応となっているのですが、ベンダープレフィックスをつけるだけでなくプロパティ名が違うものも幾つかあったり。

以下にIE/Edge対応のための書き換えの一部を記載します。

• 親要素
  • display:grid → display: -ms-grid
  • grid-template-columns → ms-grid-columns
  • grid-template-rows → ms-grid-rows
  • grid-gap → 対応するものなし。marginなどを使うしかなさそう
• 子要素
  • grid-column → -ms-grid-column
  • grid-row → -ms-grid-row
  • しかもcolumn/rowは複数エリアにまたがる場合の「m/n」表記ができず、またがるエリア数を「-ms-grid-column-span」「-ms-grid-row-span」 で指定する必要あり

……めんどくさー。

なお、一覧をまとめたものを探したところ、イギリスの Rachel Andrew さんのサイトに有りましたのでこちらもご参考まで。

デモページをIE/Edgeでも使えるようにしたものがこちらです。grid-gapの代わりはmarginを使っています。

SassやStylusを使っているのであればmixinやライブラリを上手く使うなどしてIEでも使えるようにするという手もありますが、如何せんIE/Edgeではかなり面倒くさいというのが今のところの状況です。

---

なお、他にも「CSS Grid Layoutは(Masonryのような)動的変化に対応させることはできるか？」という質問もあったのですが……ダレカツクッテクダサイ(←超他力本願)

多分何とかなるはず。