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では「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の方が良い場合もあります。
