Corder's High 2017 「Grid Layoutがやってきた!Flexboxやfloatとの適切な使い分け方法」 レポート
2017年11月4日
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。
セッション5つめはICSの鹿野さん。
Grid Layoutについて学ぶ
従来のボックスレイアウトで使われてきた手法
display: table, float, display:inline-block
など- 横並びをするためのプロパティではない
Flexboxの登場
- ボックスのレイアウトを定めるための仕様
- 主軸と交差軸で指定
- justify-content, align-itemsなど
- 固定幅、可変幅の組み合わせも容易
- flex-growなど
- 上下中央揃えも3行のコードで実現可能
- 2015年から全ての主要ブラウザで利用可能
Flexboxが苦手な物
- 複数行レイアウトの最終行がズレる
- レイアウトのために入れ子が増える
複数行のレイアウトに強い Grid が登場
- まず行を定義する
- 列を定義する
- 行と列を定義した後にアイテムを配置していく
- 最終行の左揃えもGridなら可能
- 入れ子は不要、HTMLがスッキリする
Flexbox と Grid の違い
Flexbox → 1方向
Grid → 2方向
実例
機能
- 可変・固定幅の実現
- セル間に間隔を設けられる
- アイテムの配置方向を変えることができる
- アイテムをできるだけ敷き詰める(grid-auto-flow)
- アイテムを各方向に寄せる
2017年11月4日現在、すべての主要ブラウザで対応
使い方
display: grid
を親要素に指定grid-template-rows
で行のサイズを設定grid-template-columns
で列のサイズを定義- 自分が意図したとおりにレイアウトが出来ているか確認
- 開発者ツールでグリッドを視覚化できる
- アイテムの配置場所を決める
- 行と列の番号を確認する
grid-row-start
,grid-row-end
,grid-colmun-start
,grid-colmun-end
で開始・終了位置を指定できる(すべての要素に適用する必要がある)
- 1列のレイアウトは従来通り
flexbox
を使うのがオススメ grid-area
プロパティでエリアに名前をつけることも可能
IEのサポートに関して
IE11のシェア率(世界3%, 日本16%)
IE11でもGridは部分的に対応している
↓
例 display: -ms-grid
SassやAutoprefixerを使うとラク
それぞれの使い分け
Float
- 画像、テキストの回り込みなど。
Flexbox
- 1行の横並び、縦並びなど。
Grid
- 複数行の横並び、縦並びなど。