UPDATE : 2021/01/16

CSS GridをIE11、EDGEに対応させるために注意する点

IEでもCSS Gridを適用させる時に注意するポイントです。

IE11からCSS Gridに対応しています。
そのため、案件の定義が「IE11以上」であればCSS Gridでコーディングすることもできます。

「Gridでコーディングするのか？」「Flex Boxでコーディングするのか？」迷うところです。

実際にコーディングしてみると、下記のようなレイアウトの場合は「Flex Box」によるコーディングが最適かと思いました。
トップページや、ランディングページなどに多いレイアウトで、縦のグリッド線が多くなる場合です。

CSS Gridの恩恵を受けることができるレイアウトは下記のような場合です。
レスポンシブレイアウトにした場合、ピンク色のコンテンツが2段目になるレイアウトです。
Flexboxでもコーディングできますが、構造が分かりやすい点でCSS Gridによるコーディングが最適です。

IEにも対応させるCSS Gridの３つのポイント

CSS GridをIEに適用した時に、ちょっとハマりました。

まず、名称が違うプロパティがあり「ベンダープレフィックス付けとけばOKだろう」という訳ではありません。

ちょっと詳しくメモっておくと下記になります。

IE用のベンダープレフィックスと異なるプロパティ名

IEの場合は、CSSのプロパティにベンダープレフィックスの「-ms-」を追記させる必要があります。

また、プロパティ名が違うプロパディもあります。

グリッドの列サイズを指定するプロパティなどが代表例です。
モダンブラウザ：grid-template-columns
IE：-ms-grid-columns

IE10では、ベンダープレフィックスを付けても対応していないプロパティもあります。

ちょっと古い情報ですが、ベンダープレフィックスでも対応していない情報をまとめられています。

IE10 Autoprefixer

IE10では「grid-area」が使えないのは不便ですね。（IE11では対応しています）
「grid-row」と「grid-column」で対応すればOKです。

IEでは、行を指定するgrid-rowsが必須になる

グリッドの行数やサイズを指定するプロパティ「grid-rows」は、chromeやFirefoxでは不要な場合もありますが、IEの場合は必要になります。
コンテンツの縦サイズが可変する場合の値は「auto」にします。

IEではグリッドの解釈が異なる

chrome、FirefoxとIEとでは、グリッドの数え方が異なります。

chrome、Firefoxは「グリッド線」で指定しますが、IEは「ボックス」で指定します。

グリッドを使ったサンプル

下記のレイアウトをCSS Gridでコーディングしたサンプルです。

HTML

<div class="wrap">
<div class="main-cont">
メイン
</div>
<div class="sub-cont">
サブ
</div>
<div class="side-cont">
サイド
</div>
</div>

chorome、FireFoxなどのモダンブラウザだけに対応した場合は下記になります。

CSS

.wrap {
display: grid;
grid-template-columns:300px 200px;
grid-template-rows:auto auto;
}
.main-cont {
grid-column: 1 / 2;
grid-row: 1;
}
.sub-cont {
grid-column: 1 / 2;
grid-row: 2;
}
.side-cont {
grid-column: 2 / 3;
grid-row: 1 / 3;
}

IEにも対応させた場合は下記になります。

CSS

.wrap {
display: grid;
display: -ms-grid;
grid-template-columns:300px 200px;
grid-template-rows:auto auto;
-ms-grid-columns:300px 200px;
-ms-grid-rows:auto auto;
}
.main-cont {
grid-column: 1 / 2;
grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.sub-cont {
grid-column: 1 / 2;
grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.side-cont {
grid-column: 2 / 3;
grid-row: 1 / 3;
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
}

Gulpのautoprefixerを利用する

Gulpを利用している方ならベンダープレフィックスを自動的に付加する「autoprefixer」を使っていると思います。

gridのベンダープレフィックスはデフォルトではfalseになっているのでtrueにします。

gulpfile.jsのautoprefixerのタスクに「grid:"autoplace"」を追記します。

Gulp

gulp.task('autoprefixer', function (){
gulp.src('src/style.css')
.pipe(autoprefixer({
browsers: ['ie >= 11'],
grid: "autoplace"
}))
.pipe(gulp.dest('./dest/css'));
});

これでIEのベンダープレフィックスが自動的に付加されます。

CSS Gridはレイアウトの自由度が高くなりますが、グリッド数が多い場合やページごとにグリッド数が変わる場合はFlexBoxの方が良い場合もあります。

ITTI STAFF
BLOG

CSS GridをIE11、EDGEに対応させるために注意する点