Grid レイアウトをIEに対応させるときに気をつけるべきあれこれ

業務中にGridでレイアウトを作成していたとところ、レイアウトが崩れるという報告があり、どうやら確認してみるとGridレイアウトを利用している部分がことごとく潰れているようで、これは修正をしたいと思ったのですがかなり大変だったので後世のためにメモを残しておこうと思います。

状況

開発環境: html + SCSS + js
SCSSコンパイル環境: Gulp

最も早い解消方法

今回私はGulでのコンパイルをやっていたので、プラグインであるautoprefixerのgridのコンパイルをオンにする設定を利用してある程度は解消できました。一部サイトではこの時の設定記述を

として、grid: trueと書いていますがこれは間違いです。

が正しい記述です。grid: trueでも動かなくはないようですが一部正常に動作しないものがあります。

もしもgulpを使っていないという方がいれば、web上でCSSを貼り付けたら勝手にIE対応やってくれる便利ツールもあるのでそちらも試してみてください。

https://autoprefixer.github.io/

ただ、これらを行っても確実に全てのコードがIEに対応できる訳ではありません。

発生した問題と解消方法

どんどん列挙していきます。

column-gapとかrow-gapが使えない(autoprefixerを利用すると解消してくれる時もある。)

IEはcolumn-gapとrow-gapに対応していません。(辛い)


https://developer.mozilla.org/ja/docs/Web/CSS/column-gap

解消方法ですが、marginをつけるか空のcolumn、rowを作ることです。

CSS Auto Prefixerなどの解消方法を見るとどうも空のcolumn、rowを作っているみたいです。autoprefixerを使えばある程度解消してくれるようですが、時々治らないパターンもあります。どういう状況なら発生するかなどは結局わからず仕舞いです。

-ms-grid-columnと-ms-grid-rowの両方を指定す流必要がある。

ベンダープレフィックスをつけてちまちま対応するようなパターンもありますがそうした場合に陥りやすい罠です。IEでは全ての要素に必ず-ms-grid-columnと-ms-grid-rowの両方を設定する必要があります。

メディアクエリでgrid-template-columnとgrid-template-rowのいずれかを書き換える場合は、両方指定し直す必要がある。

例えば下記のようなコードを想像します。

「パソコンの画面では2列のレイアウトで、タブレット以下は1列のレイアウト」みたいなやつです。Chromeならこれでも問題なく動作しますが、IEの場合は動作しません。なぜならメディアクエリの中でgrid-template-rowが指定されていないからです。たとえ変化がなくとも、必ずgrid-template-columnとgrid-template-rowの両方を指定する必要があるのです。

Gridレイアウトの中でGridレイアウトを作ろうとすると内側のGridが効かない(多分)

これについてはリファレンスが日英ともに見つけられなかったので何かのミスかもしれませんが、4箇所ぐらいで同時多発的に起こったのでおそらくそういうバグなんだと思います。

英語ではGrid in Gridや Nested Gridなどとも表示されますが、これらはIEだと動きません。

例えばですが、ページ全体のレイアウトをGridで作り、かつその中のコンテナでGridを利用する、といったことは実現できないということです。並列させることは問題ありません。親子関係にない2つのコンテナでGridを使うことには問題ありませんが、親子関係のあるコンテナでGridを使うことはできないようです。

解消策としては、親か子、どちらかのGridをやめ、Flex Boxなど別の手段でもって実装するということが必要のようです。

まとめ

別のサイトにも記述されていることがほとんどと言えばほとんどなのですが、Gridを使用している子要素にもGridを使うと表示ができなくなる問題はどこにも記述されていなかったです。本当はどうにかすれば動くのでしょうか…。

Social Share Button