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以上から