タイル状のレイアウトを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の最新バージョンでサポート、IE10以上・Edgeでは-ms-のベンダープレフィックス付きでサポートされていると記載されています。

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

IE10以上・Edgeの対応

IE10以上、EdgeのGrid LayoutについてはMicrosoftによるDeveloper Networkのグリッド レイアウト (Windows)で説明されています。IE10以上・Edgeで対応している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

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

モバイルブラウザの対応

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

終わりに

今回はGrid Layoutの基本的なレイアウトのつくりかたと、プロパティについて簡単に紹介しました。グリッドレイアウトの関連プロパティやできることは紹介した他にもたくさんあります。

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

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