「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド（今回）
⇒　その５ IE 対応
⇒　その６ まとめ

ショートハンド一覧

Grid Layout プロパティのショートハンドです。

ショートハンド	含まれるプロパティ
grid-template	grid-template-rows, grid-template-coloums, grid-template-areas
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-gap	grid-row-gap, grid-column-gap
grid-row	grid-row-start, grid-row-end
grid-column	grid-column-start, grid-column-end

grid-template でまとめる

トラックの大きさを指定する grid-template-rows、grid-template-coloums、名前付きの領域を定義する grid-template-areas をまとめて指定ショートハンドです。
コンテナ（親要素）に指定。

指定の方法は2通りあります。
この図のレイアウトを指定する例です。

＜方法 ① grid-template-rows / grid-template-columns をまとめる＞

grid-template: 200px 1fr  / 300px 1fr;  /* 各行トラック高さ / 各列トラック幅 */

行と列の間には、スラッシュを挟みます。

＊ この方法では、grid-template-areas は初期化されます。grid-template-areas を合わせて指定したい場合は、grid-template の後に、grid-template-areas を指定します。

＜方法 ② grid-template-areas　grid-template-rows / grid-template-columns をまとめる＞

grid-template: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */               "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */              / 300px 1fr         /* / 各列トラック幅 */

実際のレイアウトと近い配置に指示が書かれるので、CSS 上でも視覚化されるような指定方法ですね。
行、列の大きさは省略可。

grid でまとめる

コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンドです。
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow を単一の宣言で設定します。

指定の方法は３通りあります。

＜方法 ① grid-template-area　grid-template-rows / grid-template-columns をまとめる＞
grid-template の方法 ① 、または方法 ② と同じです。
（ですが、grid-template とは異なり、grid では、ほかの grid のサブプロパティはすべて、初期値に初期化されます。）

grid: 200px 1fr / 300px 1fr;  /* 各行トラック / 各列トラック */

grid: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */      "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */     / 300px 1fr         /* / 各列トラック幅 */

＜方法 ② grid-auto-flow: row と grid-template-columns をまとめる＞
grid-auto-flow: row を指定するので、アイテムは1行目から順に右から左へ埋められていきます。
行トラック数 ⇒ 可変。全てのアイテムが埋まるまで行は加算されます。
列トラック数 ⇒ 固定。このプロパティで指定した数。

grid: auto-flow 100px / 1fr 1fr 1fr;   /* 行に auto-flow、行トラックの高さ / 各列トラックの幅 */

スラッシュ前：行を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: row）と行数可変を指定し、続いて 100px と行の高さを指定しています。
スラッシュ後：列を定義しています。1fr の幅で 3 列になります。

＜方法 ③ grid-template-rows と grid-auto-flow: column をまとめる＞
grid-auto-flow: column を指定するので、アイテムは1列目から順に上から下へ埋められていきます。
行トラック数 ⇒ 固定。このプロパティで指定した数。
列トラック数 ⇒ 可変。全てのアイテムが埋まるまで列は加算されます。

grid: 1fr 1fr 1fr / auto-flow 100px;  /* 各行トラックの高さ / 列に auto-flow、列トラックの幅 */

スラッシュ前：行を定義しています。1fr の高さで 3 行になります。
スラッシュ後：列を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: column）と列数可変を指定し、続いて 100px と列の幅を指定しています。

grid-gap でまとめる

トラック間の隙間を指定する grid-row-gap と grid-column-gap をまとめて指定するショートハンドです。
コンテナ（親要素）に指定。

grid-gap: 10px;  /* 行列ともトラック間の隙間 10px */

grid-gap: 3% 5%;  /* 行トラック間の隙間 3%　列トラック間の隙間 5% */

grid-gap は、値が1つの場合は、行、列とも一括指定、スペースを挟んで二つの場合は、1つ目が行、2つ目が列の値になります。

grid-row, grid-column 開始と終了を分けて記述

アイテムの領域を指定する grid-row と grid-column は、開始と終了のライン番号をまとめて記述しているショートハンドです。
これを、開始と終了を分けて指定することができます。
アイテム（子要素）に指定。

grid-row-start: 1; /* 行の領域の開始するライン番号 */grid-row-end: 2;   /* 行の領域の終了するライン番号 */
grid-column-start: 2; /* 列の領域の開始するライン番号 */grid-column-end: 3;   /* 列の領域の終了するライン番号 */