LoginSignup
1

More than 3 years have passed since last update.

IE11で再現できないdisplay:gridのレイアウト

Last updated at Posted at 2019-06-10

概要

Autoprefixerのおかげでdisplay: grid;の対応も概ね大丈夫だろうという空気になってきているので、実案件で使ってみましたが、再現できないレイアウトがあったのでその備忘録です。

再現できないレイアウト

display: grid;の使い方に関しては割愛します。
素敵な記事が沢山ありますので検索して参照ください。
IE11で再現できなかったレイアウトを以下にまとめます。

記事一覧などの格子状レイアウト

ブログの記事一覧などのようにカードやタイルモジュールが複数列で行が増えていくパターン。

行けると思ったコード

3列で高さがなりゆきの記事一覧(カードの高さはstretchする場合)を再現する場合。

article.css
grid-template-columns: repeat(3, 32%);
grid-template-rows: repeat(auto-fill, auto);
gap: 2%;

が…ダメッ…!

Autoprefixerを持ってしてもrepeat()関数が保管できないため、崩れます。
変換されたコードを見てみると、auto-fillのまま出力されており(確か)、IE11では崩れます。
行数を指定すれば行数分繰り返されて出力されるため上手く使えますがauto-fill、auto-fitに相当するプロパティが存在しないため、再現不能のようです。

まとめ

IE11で再現できないdisplay:gridのレイアウトでした。
引き続き案件でトライして再現できないものがあれば追記しようと思います。
もし『それこう書けば行けるぜ!』という解決策を知っている方があればコメントいただけると助かります。
IE11早く滅びて。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1