CSS Nite LP54「Coder's High 2017」フォローアップ（5）鹿野壮さん（ICS）

2017年11月4日（土）ベルサール半蔵門イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップとして、鹿野壮さん（ICS）の『Grid Layoutがやってきた！ Flexboxやfloatとの適切な使い分け方法』セッションのスライドなどを公開します。

フォローアップメッセージは、イベント開催直後（2017年11月）の時点のものです。

フォローアップメッセージ（補足など）

「Grid Layoutがやってきた！ Flexboxやfloatとの適切な使い分け方法」を担当した鹿野です。今回はご参加ありがとうございました。

2017年、全主要ブラウザが対応したCSS Grid。その概要、コーディング方法、IE 11の対応方法、floatやFlexboxとの使い分けまでを解説しました。

すごくわかりやすかった、実践で使えそうなことがわかった
FlexboxやGridとの使い分けがわかりやすかった
基本的な使い方がイメージできて、ハードルが低くなったような気がする

など、想像よりも多くの反響があり嬉しく思います。私自身がGridについて深く学びたかったこともあり、皆さんと一緒にGridの魅力を体験できる時間だったと感じます。

アンケートやTwitterでいただいた質問と答え

フォローアップとして、アンケートやTwitterでお寄せいただいた質問をいくつかピックアップして回答します。

入れ子にできますか？

可能です。

セッション中に紹介したデモ「Rodchenko Poster Layout - CSS Grid」では、.backgroundの要素にGrid指定、その中の#cardに対して更にGrid指定となっています。

`<table>`の`colspan`属性（セルを横に繋げる指定）は可能ですか？

spanという単位が使えます。

grid-row-start: 1;grid-row-end: span 2;

と指定すると、「行の一つ目のラインから、2つ分伸ばしください」という意味になります。

プロパティの楽な書き方はありますか？

行と列の定義についてまとめることが可能です。

行の開始と終了位置指定方法①

セッションで紹介した方法です。

.item {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 2;}

行の開始と終了位置指定方法②

行の開始・終了、列の開始・終了をまとめて指定する方法です。 / で区切ります。

.item {grid-row: 1 / 3;grid-column: 1 / 2;}

行の開始と終了位置指定方法③

行と列をまとめて指定する方法です。 /で区切り、次のように指定します。

grid-area: (行開始番号) / (列開始番号) / (行終了番号) / (列終了番号)

セッション中に紹介したメインビジュアルのアイテム位置定義は、次のように記述できます。

.main-visual {grid-area: 1 / 1 / 3 / 2;}

ポリフィルはありますか？

Grid未対応ブブラウザでもGridレイアウトが可能なポリフィルがあります。しかし、次のような課題があります（参考記事「CSS Grid Layoutをガッツリ使った所感 - Qiita」）。

ID属性が多く付与される
overflowの解釈・スクロールバーの発生有無が想定と異なった
CSS Grid Layoutとはあまり関係ない部分のレイアウトが崩れる
ライブラリの容量が大きい

ポリフィルを使う際は、これらの課題に注意してください。

複数行になる可能性があるものはGridにしておいた方がよいのでしょうか？

Gridにしておいたほうが管理しやすいケースが多いです。

例えば、今回のセッション内で紹介した「猫の3つのサムネイル画像横並び」を複数行にしたければ、display: flexの代わりにdisplay: gridを指定する方がよいでしょう。ただし、ページ全体のコンテナ .containerではなく、猫のサムネイルのコンテナ .other-photosに対してGridを指定し、 .other-photos内のみでGridレイアウトの影響が及ぶようにする方が全体のレイアウトへの影響が少なくてラクです。

`fr`とは何の略ですか？

fractionです。（越智さん、フォローツイートありがとうございます！ https://twitter.com/o_ti/status/926724288610164736 ）

`fr` を使う場合、他の要素は可変にしない方がいいのでしょうか？

可変要素をいくつ並べても問題ありません。

frという単位は、「余白がある場合、その要素をどれだけ拡大するか」を指定しますが、複数の要素にfrを使うと要素の拡大率がfrの数によって変わります。いくつか例を見てみましょう。

次のCSSコードでは、2行のレイアウトになります。1行目のサイズが100px、２行目は残りの領域全てです。

.container {display: grid;grid-template-rows: 100px 1fr;}

`fr`が一つだけの場合

次のCSSコードでは、3行のレイアウトになります。1行目のサイズが100px、2行目と3行目は、残りの領域を半分ずつに分解したサイズになります。

.container {display: grid;grid-template-rows: 100px 1fr 1fr;}

2frのように、frに2以上を指定すると余った領域をその数分だけ確保します。次のCSSコードでは、3行のレイアウトになります。

1行目のサイズ : 100px
2行目のサイズ : 残り領域を3分割したうちの1つ分
3行目のサイズ : 残り領域を3分割したうちの2つ分

.container {display: grid;grid-template-rows: 100px 1fr 2fr;}

FlexboxのGridを使ったことがある人であれば、 flex-grow プロパティと似たような挙動をすると覚えるとよいでしょう。記事「CSS Grid Layout を極める！（場面別編） - Qiita」にわかりやすい解説がありますので、合わせて参照ください。

レスポンシブ対応した時の状態がわかりませんでした

行列の構造を変える例

3行3列のGridを、画面サイズ500px以上のときは2行4列に変更しつつ、各セルのサイズを変更してみましょう。

.container {display: grid;grid-template-rows: 1fr 220px 30px;grid-template-columns: 50% 160px 1fr;}@media (min-width: 500px) {.container {grid-template-rows: 1fr 500px;grid-template-columns: 400px 300px 1fr 200px;}}

アイテムの配置位置を変える例

行1から3まで、列1から2まで配置したmain-visualを、画面サイズ500px以上のときは列1から4まで配置するように変更してみましょう。

.main-visual {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 2;}@media (min-width: 500px) {.main-visual {grid-column-start: 1;grid-column-end: 4;}}

いずれの場合も、HTMLコードの構造を一切変えることなくCSSのみで柔軟にレイアウトを変更できるのがポイントです。

ブラウザがGridに対応した正確なバージョン番号を知りたいです

各ブラウザは、次のバージョンにてGridに対応しました。

Edge : 16より対応
Safari : 10.1より対応
Chrome : 57より対応
Firefox : 52より対応
iOS Safari : 10.3より対応
Android版Chrome : 57より対応
Android System WebView : 57より対応

いずれも2017年にリリースされたバージョンで、一番遅かったのがEdge 16（2017/10/17リリース）です。

古いiOS Safari、古いAndroidブラウザ、Grid未対応のブラウザ対応が必要な場合は？

方法1. ポリフィルを使う

「ポリフィル」を使うと、Grid未対応ブラウザでもGridのレイアウトが実現できます。副作用もあるので、詳しくは前述の「ポリフィルはありますか？」を参照ください。

方法2. デフォルトを1カラムレイアウトにする

デザイン次第ではありますが、デフォルトをGridを使わない1カラムレイアウトにするという方法もあります。

スマートフォンまたはGrid未対応ブラウザ : 1カラム
Grid対応ブラウザ : Gridによるレイアウト

とすることで、Grid対応、未対応ブラウザに対して情報を伝える方法です。私が個人案件で仕事をする際は、この手法を用いています。

@supports規則を使うことで「グリッドに対応しているブラウザのみ、をを付加することができます。

/* グリッド対応ブラウザで、500px以上のデバイス幅のときのみグリッドを適用する */@supports (display: grid) {@media (min-width: 500px) {.contaner {display: grid;}}}

メリットばかりではなく、Gridのデメリットとその対応策について聞きたいです

一番のデメリットは未対応ブラウザがあることです。しかし、昨今のブラウザは自動アップデートが主流になっていますし、IE 11でも対策次第でGridが使えることを考えると、今後Gridが利用できる環境は広がるでしょう。前述の「古いiOS Safari、古いAndroidブラウザ、Grid未対応のブラウザ対応が必要な場合は？」のような対応をしつつ、ブラウザのサポート拡大を待ちましょう。

また、行列の数を増やしすぎると管理が煩雑になるというデメリットもあります。Excelでも行列を多く増やしてセルの結合を多用すると見辛くなるのと同じです。Gridによるレイアウトは大枠部分に留め、細かい部分についてはFlexboxで代用できないか、Gridの入れ子ができないか、等を検討しながらレイアウトしていくのがよいでしょう。

感想

いただいた感想の中から、特に印象深かった感想をいくつかピックアップします。Gridの便利さが伝わったようで何よりです。

レイアウトに自由度が増して面白い
利用できるとコードが短くなりそう
使えるのは少し先になりそうだけど、使えるようになったら常用しそう
セルに名前を使えるところがデザイナーに愛され、昔のテーブルレイアウトのようなところがディレクターに愛されると思った
Flexboxの複数行のズレが起きていたので役に立った
JavaScriptで対応していたようなレイアウトを、CSSで実現できるのは嬉しい
エクセルのように扱えますの言葉で一気に理解が深まりました
入れ子の指定がなしでGridのレイアウトができるのがすごい
div山脈を築き上げなくてよいのが素敵
役所や教育機関ゆえに、日本のIE 11のシェアが16%だと思う。しかし、対応を余儀なくされるのも事実

Gridの学習に役立つサイトについて

CSS Gridの学習には、次のようなサイトが役立ちます。

もしGridの学習をしていて不明な点があれば、Twitter等で気軽にご相談くださいませ。

告知

次の媒体でWebデザインやフロントエンドの情報について発信しています。こちらも是非ご覧ください！

このセッションは「CSS Niteベストセッション2017」にてベスト・セッション10に選ばれました。

ベストセッション2019

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。

CSS Nite LP54「Coder's High 2017」フォローアップ（5）鹿野 壮さん（ICS）