前書き
grid-layout, 最近は大分スタンダードになってきましたね。
flexボックスとはまた違った使いやすさがあって個人的にも好きなレイアウト方法です。
そんなgrid-layoutですが、IE11でも使えるので大抵の現場ではブラウザの影響で選択支から外れることはほとんどありません。
しかし、他のブラウザと同じ指定で同じデザインになるかというとそれはまた別の話。
自分への備忘録も兼ねてIE11でのgrid-layoutの指定方法についてまとめていきます。
本編
grid-layoutを利用するに当たって主に使うcssプロパティは以下あたりでしょうか。
- display
- grid-template-columns
- grid-template-rows
- grid-column
- grid-row
実際に使ってみたのがこちら。
普通ですね。
See the Pen grid-layout by ririli (@ririli) on CodePen.
ではこれをIE11にも対応させたのがこちら。
See the Pen grid-layout-IE11 by ririli (@ririli) on CodePen.
どこがどう変わったのかみていきましょう。
display
一目瞭然ですね。
IE11にベンダープリフィックスをつけます。
display: grid;
↓
display: -ms-grid;
grid-template-columns
ベンダープリフィックスがつきます。
名前のtemplateという部分がなくなっているので注意。
grid-template-columns: 200px 200px;
↓
-ms-grid-columns: 200px 200px;
grid-template-rows
columnsと同じですね。
ベンダープリフィックスがつきます。
名前のtemplateという部分がなくなっているので注意。
grid-template-rows: 200px 200px;
↓
-ms-grid-rows: 200px 200px;
grid-column
さて、ここからがやっかいです。
プロパティ名はベンダープリフィックスなのでいいとして、与える値の書き方が変わっていますね。
grid-column: 1 / 2;
↓
-ms-grid-column: 1;
通常の指定方法では1/2としてあります。
これは 「gridで区切った時の縦の線を数えて、1本目から2本目までを範囲とする」 という指定です。
IE11用の指定方法では 「gridで区切った時の横に並んでいる箱の数を数えて、1箱目を範囲とする」 という指定です。
ということで、同様に以下の2本目から3本目という指定は2箱目という指定に変わります。
grid-column: 2 / 3;
↓
-ms-grid-column: 2;
grid-row
grid-column同様に範囲の指定方法が線から箱に変わっています。考え方はcolumnと同じなので割愛。
grid-column: 1 / 2;
↓
-ms-grid-column: 1;
-ms-grid-row-span
ところで、気になる記述がありますね。
-ms-grid-row-span: 2;
これはなんでしょう？
IE11に対応していない時にはこれに変わるようなものはありませんでした。
実はIE11用ではgridの範囲指定の方法にもう少し違いがあります。
この-ms-grid-row-spanというプロパティは箱の数を指定しています。
なんのこっちゃだと思うので実例をみてみましょう。
.side {
grid-column: 2 / 3;
grid-row: 1 / 3;
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
}
このプロパティはsideクラスに付与されてますね。
名前にrowとあるので元々の指定であるgrid-rowとそのIE11用をみてみます。
grid-row: 1/ 3;
↓
-ms-grid-row: 1;
これはおかしい。
1本目から3本目ということは1箱目と2箱目どちらも指定しないとイコールになりません。
しかし、-ms-grid-rowやcolumnには一つしか指定できません。
そこで、-ms-grid-row-spanに箱の数（今回は2）を指定して、1箱目から2箱分という指定にすることでイコールにしています。
-ms-grid-row: 1;
-ms-grid-row-span: 2;
まとめ
直感的にレイアウトを決められるgrid-layout、IE11で利用するにはそこそこ罠があるので要注意です。
逆に気をつける箇所さえわかっていればルールに沿って書き換えるだけ。
便利なプロパティをガンガン使って楽していきましょう。