CSS Grid Layout

6772 ワード
CSS3 gridlayout cssgridlayout CSS3 テキストリンク

CSS Grid Layout

この間HTML5 感。のイベントに参加したので、そこで知ったCSS Grid Layouの内容をメモ。

HTML5 感。

登壇者は株式会社コムセント最高技術責任者（CTO）の関口和真さんでした。
内容は端折りますがCSS Grid Layoutの使い方の簡単サンプルを載せます。

CSS Grid とは

  • CSSで２次元のグリッドを（仮想的に）描きレイアウトを作成するための仕組み
    ** グリッド＝Excelみたいな構造

  • 任意のマス目に対して要素を配置することが可能
    ** HTMLに依存しない

CSS Grid 用語

  • 列、行、セル（エリア）、トラック
  • インデックスは0からでなく1から
  • 隣接する２本のラインの間をトラックと言う

CSS 列と行

  • 重要なのは線（ライン）
  • 下から、右から数える場合は-1、-2から数える

サイズ指定

  • コンテナを作成しなかに治める要素を指定
  • display: grid
  • grid-template-rowsで行の高さ指定できる
  • grid-template-columnsで列の幅を指定できる
  • frという単位が使える（1fr：残り全て）

位置指定

  • grid-row: 1 / 3
    ** 1行から3行

  • grid-column: 1 / 3
    ** １列から３列

エリア

  • セルに対してエリアを作ることが可能
  • セルの別名として機能する

エリア指定方法

grid-template-areas:
"area1 area2"
"area1 area3"
  • container直下の子要素がセル扱いになる
  • grid-template-areasは改行で意味が変わったりするので整形すると気をつける
.container {
  display: grid;
  grid-template-columns: 200px 400px 1fr; //幅200px,400px,残り幅全部の３カラム
  grid-template-rows: 200px 200px; //高さ200pxの行を２行
  grid-gap: 20px; //カラム同士のマージンを20pxにセット
  grid-template-areas: //カラムに名前をつけて配置を指定している
    "area01 area02 area03"
    "area04 area05 area06";
}
@media screen and (max-width: 768px) {
/* セルの配置を変える場合grid-template-areasで配置を変えることが出来る */
.container {
  display: grid;
  grid-template-columns: 200px 400px 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 20px;
  grid-template-areas:
    "area01"
    "area03"
    "area04"
    "area02"
    "area05"
    "area06";
  }
}
.box01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  grid-area: area01;
}
.box02 {
  grid-column: 2 / 3;
  grid-row: 2 / 3
  grid-area: area02;
}
.box03 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  grid-area: area03;
}
.box04 {
  grid-column: 2 / 4;
  grid-row: 1; /* 1 / 2 */
}

code sample

ではflexboxは？

  • 順番を逆にすることはできるが変えることをはできない
  • flexboxとCSS Gridを作った人は同じ
  • 両方うまい具合に使い分けすれば良いのでは

まだ最新のブラウザからでしか使いこなせない

  • IE11以上、IE Edge12以上（ベンダープレフィックスがいる、grid-gap使えないなど微妙に仕様が異なる点がある）
  • IE Edge16から完全対応
  • Safariが10.3以上から（古いmacとかだと使えない）
  • Chrome 57以上から
  • FireFox 52以上から