東京で開催された「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 が登場

  1. まず行を定義する
  2. 列を定義する
  3. 行と列を定義した後にアイテムを配置していく
  • 最終行の左揃えもGridなら可能
  • 入れ子は不要、HTMLがスッキリする

Flexbox と Grid の違い

Flexbox → 1方向
Grid → 2方向

実例

機能

  • 可変・固定幅の実現
  • セル間に間隔を設けられる
  • アイテムの配置方向を変えることができる
  • アイテムをできるだけ敷き詰める(grid-auto-flow)
  • アイテムを各方向に寄せる

2017年11月4日現在、すべての主要ブラウザで対応

使い方

  1. display: grid を親要素に指定
  2. grid-template-rows で行のサイズを設定
  3. grid-template-columns で列のサイズを定義
  4. 自分が意図したとおりにレイアウトが出来ているか確認
    • 開発者ツールでグリッドを視覚化できる
  5. アイテムの配置場所を決める
    1. 行と列の番号を確認する
    2. grid-row-start, grid-row-end, grid-colmun-start, grid-colmun-end で開始・終了位置を指定できる(すべての要素に適用する必要がある)
  6. 1列のレイアウトは従来通り flexbox を使うのがオススメ
  7. grid-area プロパティでエリアに名前をつけることも可能

IEのサポートに関して

IE11のシェア率(世界3%, 日本16%)

IE11でもGridは部分的に対応している

display: -ms-grid

SassやAutoprefixerを使うとラク

それぞれの使い分け

  • Float

    • 画像、テキストの回り込みなど。
  • Flexbox

    • 1行の横並び、縦並びなど。
  • Grid

    • 複数行の横並び、縦並びなど。