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公式サイト の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
