IE11のブラウザシェア率は世界的に見ると2,3％となりましたが日本ではまだ10%近くあったります。
そんなIE11でdisplay:grid;を他のモダンブラウザと同じよう使おうとすると、上手く表示されません。
そこで今回はIE11でも上手く表示されるようにする為の記述を残しておきたいと思います。
※モダンブラウザでの利用法はある程度わかっているという形で進めます。
１．デモ
※上記デモが表示されない場合は、CodePenのTOPページに一度飛んで戻って来てください。
Checking your browser…などと出るかもしれませんが少し待てば表示されます。
２．HTMLファイル
<div class="grid3">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>HTMLは上記の3列カラムになるモノを今回は例として使います。
３．CSSファイル
.grid3 {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 100px;
grid-template-rows: 100px;
grid-gap: 10px;
gap: 10px;
}
.box {
background: #000;
}
.grid3>.box:nth-of-type(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.grid3>.box:nth-of-type(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.grid3>.box:nth-of-type(3) {
-ms-grid-row: 1;
-ms-grid-column: 5;
}上の方から順番に説明をしていきます。
まず、IEでgridを使うには、display: -ms-grid;とし、ベンダープレフィックス(-ms-の部分)を付けなければなりません。
Autoprefixerを利用すればベンダープレフィックスを気にせず、複雑なレイアウトを作るコトも楽になりますが、コーダーとして仕事をしている訳ではなかったり、ただの3,4カラムのシンプルなレイアウトであれば今回のやり方で問題ないと思います。
次に、grid-template-columns: 1fr 1fr 1fr;の部分です。
ここをIE11に対応させるには、-ms-grid-columns: 1fr 10px 1fr 10px 1fr; とします。
この間に入れた10pxの部分が大事で、横の要素との隙間になります。
他のモダンブラウザであれば、grid-gap: 10px;の部分に該当するのがこの場所になる訳です。
grid-template-rows: 100px;の部分も、-ms-grid-rows: 100px;とします。
次に、.grid3>.box:nth-of-type(1) 〜 .grid3>.box:nth-of-type(3) の部分です。
IE11では個々に表示位置を指定しなければなりません。
-ms-grid-row は 表示させたい行番号を入力します。
-ms-grid-column には表示させたい列番号を入力するのですが、2つ目のboxに3が指定してあり、3つ目のboxには5が指定してあります。
ここが重要で、-ms-grid-columnsにて隙間を作るために1fr 10px 1fr 10px 1fr と入力しましたが、この10pxの部分は1つの列として扱う形になる訳です。
ゆえに、2つ目のboxは3列目、3つ目のboxは5列目の扱いになるのです。
これでIE11でも無事表示されるはずです。