タイル状のレイアウトをGrid Layoutで

タイルが並ぶように同じ幅のアイテムが繰り返し配置されるレイアウトをGrid Layoutでつくってみます。

このようなレイアウトは、floatやFlexboxでもつくることができますがGrid Layoutを使うことで便利になったポイントを紹介します(今回紹介していないプロパティも使っています)。このサンプルでは、Grid Layoutに関するCSSはグリッドコンテナのみに指定しており、少ないプロパティでこのレイアウトをつくることができました。

.container {
  /* グリッドコンテナ */
  display: grid;
  /* 最小100px、最大1frの列を繰り返しつくる */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

レイアウトに関する指定をグリッドコンテナにまとめられる!

まず1つ目に、グリッドコンテナの指定のみでこのレイアウトをつくれるのはとても便利です。floatやFlexboxでレイアウトするとき、親要素にコンテナとなる指定をして、横並びにするアイテムにはアイテムの幅や余白の指定をする必要があったと思います。Grid Layoutでは、グリッドコンテナにグリッドアイテムの配置についての指定ができます。

アイテム間の余白調整が手軽

2つ目はgrid-row(column)-gapでグリッドアイテム間の余白を指定していることです。grid-row(column)-gapは、グリッドアイテムの間にだけ余白ができるようになっています。

floatやFlexboxでこのレイアウトをするには、余白の処理に工夫をする必要があります(例:marginをつけて、レイアウトの端等の不要なmarginをネガティブマージンやE:nth-child(n)で消す) 。grid-gapを使えば、そういった調整は必要はありません。

親要素が可変幅でもアイテムのサイズ調整がシンプル

3つ目はgrid-template-columns の値、repeat(auto-fill, minmax(100px, 1fr))です。これは、グリッドトラックのサイズの指定に使えるrepeat()auto-fillを使って親要素におさまるようにアイテムを繰り返し横並びにし、minmaxでアイテムの最小幅・最大幅を指定しています。

floatやFlexboxの横並びレイアウトではレスポンシブ対応をするとき、表示の幅によって各列にいくつのアイテムが並ぶように、どんな幅にするかという指定を複数のプロパティでする必要がありました。Grid Layoutのrepeatauto-fillminmaxをうまく使うと、可変幅レイアウトの調整がしやすくなると思います。

ブラウザの実装

Can I use…によると、Grid Layoutの各ブラウザの対応状況を確認すると、Chrome、Firefox、Safari、Edgeの最新バージョンで利用可能、IE10以上では-ms-のベンダープレフィックス付きでサポートされていると記載されています。

ですが、IE10以上〜Edge15のGrid Layoutは2011年時点の仕様である「Grid Layout | W3C Working Draft 7 April 2011」を元に実装されています。Chrome、Firefox、Safari、Edge最新版に実装されている「CSS Grid Layout Module Level 1」とは、対応しているプロパティや仕様に違いが多いため、注意しなければなりません。

IE10〜Edge15の対応方法

IE10以上、EdgeのGrid LayoutについてはMicrosoftによるDeveloper Networkの「グリッド レイアウト (Windows)」で説明されています。IE10〜Edge15で対応しているGrid Layout関連プロパティは以下のとおりです。

CSS Grid Layout Module Level 1IE10以上・Edgeで実装されているGrid Layout備考
display: griddisplay: -ms-grid
grid-template-rows(columns) -ms-grid-rows(columns)
grid-row(column)-start-ms-grid-row(column)
grid-row(column)-endなしグリッドアイテムの配置終了位置を指定するプロパティはなし。-ms-grid-row(column)で対応する。
-ms-grid-row(column)-spanグリッドがまたがる行・列の数を指定する。既定値は1。
align-self-ms-grid-column-align
jusitify-self-ms-grid-row-align

Internet ExplorerでGrid Layoutを使うのは現実的でないと思っている人も多いかもしれませんが、先ほどの例のように簡単なレイアウトであれば、ベンダープレフィックスを付けることでIE10〜Edge15に対応できます

IE10/IE11対策にはAutoprefixerが最も効果的

Autoprefixer(バージョン8)はベンダープレフィックスを付与するだけでなく、IEの旧仕様をエミュレートする機能が備わっています。grid-template-areasなどIE11で本来は利用できないプロパティーでも、互換性のあるコードに変換してくれます。この機能はデフォルトでは無効になっているので、オプションでgrid: trueと指定し有効化します。

▼postcss.config.js

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    // ベンダープレフィックスを自動付与する
    autoprefixer({grid: true})
  ]
};

実証サンプルを用意してますので、ご覧ください。

Autoprefixerの使い方は記事「CSSベンダープレフィックスを今この瞬間に辞める為のAutoprefixerの導入」や「webpack 4入門:PostCSS(AutoPrefixerやcssnano)を使う方法」を参照ください。

前述のgapも最新版のAutoprefixerを使えば、IE11で表示可能になります。

モバイルブラウザの対応

モバイルブラウザは、iOS Safariの10.3以上とChrome for Android、Android標準ブラウザでGrid Layoutがサポートされています。古いバージョンを対象ブラウザに含める場合は、そのウェブサイトの対応ブラウザやデザインを考慮して部分的にGrid Layoutでレイアウトするなど、工夫をすればGrid Layoutをウェブ制作に役立てることができると思います。

終わりに

今回はGrid Layoutの基本的なレイアウトの作り方と、プロパティを紹介しました。グリッドレイアウトで実現可能なことは他にもたくさんあります。

弊社池田の記事「CSS Grid Layoutをガッツリ使った所感」では、実際にGrid Layoutでウェブサイトを作ったときの利点や工夫を紹介しています。国内で一番はやくGrid Layoutを投入した事例として、現場で実戦投入したい方の参考になると思います。

続編記事「特徴で使い分けたいCSSレイアウト手法」では、Grid LayoutとfloatとFlexboxとの違いについて紹介します。あわせてご覧くださいませ。