【62-3】セルやエリアを一括指定する grid-templateショートハンド

今回は、grid-template ショートハンドプロパティ を使ってみましょう。
これは以下の3つのプロパティのショートハンドです。
・grid-template-rows
・grid-template-columns
・grid-template-areas

grid-template-rows と grid-template-columns はこちら↓をご覧ください。
【62-1】Grid Layout の grid-template-rows, grid-template-columns
grid-template-areas はこちら↓
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

このgrid-templateの指定は、ちょっと「お作法」があるので、整理してみます。

本日のINDEX

1. grid-templateショートハンドプロパティの値
2. 書き方1：grid-template-rows と-columns を一括で
   1. grid-template-areas の値は初期化されるので後に書く
3. 書き方2：grid-template-areas の値も加えて一括で
   1. 書き方2 は「エリア名」だけが必須

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns

（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

【62-3】セルやエリアを一括指定する grid-templateショートハンド　←今日はココ

【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns

【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる

【62-9】Grid Layout での order, position-absolute, z-index, margin

（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

参考：
・CSS Grid Layout Module Level 2 | W3C Candidate Recommendation Draft
・CSS グリッドレイアウト | MDN

grid-templateショートハンドプロパティの値

まずは grid-templateショートハンドプロパティの値を見てみましょう。

grid-templateプロパティ
キーワード	none がデフォルト値。明示的なグリッドがまったく無いことになる。 が、暗黙的グリッドは作られる。
CSS構文	<'grid-template-rows'> / <'grid-template-columns'> grid-template-rows と grid-template-columns の値を「/」で区切って書く。 grid-template-areasは初期化（none）されるので要注意。
	[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ] これはエリア名（grid-template-areas）を入れて書く方法。
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	グリッドコンテナ （display:grid か display:inline-grid を指定した要素）

値の CSS構文が2種類あるので、1つずつ見ていきましょう。

書き方1：grid-template-rows と-columns を一括で

書き方の1つめです。
CSS構文は <'grid-template-rows'> / <'grid-template-columns'> となっています。

これは、grid-template-rowsの値と grid-template-columnsの値をこの順番で書いて、「/（スラッシュ）」で区切りるだけ。この書き方はけっこう簡単ですね。

例えばこんなふうに2行書いていたものを、

.container{
  display: grid;
  grid-template-rows: repeat(3, 80px);
  grid-template-columns: repeat(2, 130px);
  }

ショートハンドでまとめるとこうなります。

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  }

プレビューはこちら。ちゃんとグリッドになってますね。

A

B

C

D

E

F

ライン名も入れる書き方がありましたね。
このように書いていたものは、

.container{
  display: grid;
  grid-template-rows: [top-start] 80px [second] 80px [third] 80px [last];
  grid-template-columns: [first a-start] 130px [b-start] 130px [last];
  }

ただそのまんま「/」で区切ってつなぐだけです。

.container{
  display: grid;
  grid-template: [top-start] 80px [second] 80px [third] 80px [last] / [first a-start] 130px [b-start] 130px [last];
  }

grid-template-areas の値は初期化されるので後に書く

この書き方だと、grid-template-areas の値はデフォルトの none になります。
ですので、エリア設定が必要なら、grid-template-areas を grid-template の後に書くこと！ 前に書いちゃだめ。
CSSは後に書いたものが先に書いたやつを上書きするからね。

例えばこのように3つ別に書いていたものを、

.container{
  display: grid;
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  grid-template-rows: repeat(3, 80px);
  grid-template-columns: repeat(2, 130px);
  }

まとめるならこう。
grid-template-areas を後に移動させないと none になっちゃいます。

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  }

プレビューはこちら。

A

B

C

D

書き方2：grid-template-areas の値も加えて一括で

書き方の2つ目です。
これは3つのプロパティを全部一括で書けますが、ちょっとしたお作法があります。

さっきのこの↓指定を、

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  }

全部まとめるとこうなります。

.container{
  display: grid;
  grid-template:
      "areaA areaA" 80px
	  "areaB areaC" 80px
	  "areaD areaD" 80px
      / 130px 130px;
  }

1行（row）ずつ エリア分割と行の高さを行数ぶん書き、
最後に「/」で区切ってカラムの幅を 1カラムずつ別けて書きます。

この書き方では、repeat( )関数は使えないんです。
エリアの指定で1行（row）ずつ書くことに決まってるので、カラムも1カラムずつに別けて書くのが正しいお作法。（アスキーアートの書き方です）
最後のカラムの方で「 / repeat(2, 130px) 」などと書くとエラーになるので要注意。

上のコードはわかりやすいように改行していますが、このように1行で書いてもOK。

.container{
  display: grid;
  grid-template: "areaA areaA" 80px "areaB areaC" 80px "areaD areaD" 80px / 130px 130px;
      }

そして、エリア指定をしたら、アイテム側でそのエリア名を指定しないと何にも起こらないんでしたね。ちゃんと最後まで書くとこんなかんじです。

.container{
  display: grid;
  grid-template: "areaA areaA" 80px "areaB areaC" 80px "areaD areaD" 80px / 130px 130px;
  }
.container div:nth-child(1) {grid-area:areaA; background:#fcf}
.container div:nth-child(2) {grid-area:areaB; background:#ffc}
.container div:nth-child(3) {grid-area:areaC; background:#cfc}
.container div:nth-child(4) {grid-area:areaD; background:#eee}

書き方2 は「エリア名」だけが必須

書き方2のCSS構文はこうなっています。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
さらに、<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

[ ] は、ひとまとまりという意味。
? は、0回か1回出現（あっても無くても良いってこと）
+ は、1回以上の出現（1個か複数可ってこと）
（構文の読み方はこちらを参考に→ CSSの値の定義構文 | MDN）

これを読み解くと、
「ライン名　エリア名　トラックサイズ　ライン名」を1単位として1個以上複数可。
「/（スラッシュ）」で区切って、
「ライン名　トラックサイズ」が1個以上複数可で最後に「ライン名」
ということ。

で、「?」記号がついてないのが、グリーン文字にした「エリア名 <string>」だけ。
あとは あっても無くても良いってこと。
ですので、この書き方がミニマムということです。

.container{
  display: grid;
  grid-template:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
      }

プレビューはこちら。

A

B

C

D

ちゃんとグリッドにはなってますね。

grid-template-rows と grid-template-columns の値が無いと両方デフォルト値の none になるのですが、grid-auto-rows, grid-auto-columnsプロパティによって暗黙的にグリッドが生成されているのでグリッド化します。（grid-auto-rows, grid-auto-columnsプロパティについては後日詳細）

さて、書き方2でも、ライン名も入れる書き方ができるんですね。
このように書いていたものは、

.container{
  display: grid;
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  grid-template-rows: [top-start] 80px [second] 80px [third] 80px [last];
  grid-template-columns: [first a-start] 130px [b-start] 130px [last];
  }

ショートハンドの構文どおりに書くとこんなかんじ。

.container{
  display: grid;
  grid-template:
    [top-start] "areaA areaA" 80px [second] 
    [second] "areaB areaC" 80px [third] 
    [third] "areaD areaD" 80px [last] 
    / [first a-start] 130px [b-start] 130px [last];
  }

プレビューはこちら。ちゃんと指定どおりグリッドが切られています。

A

B

C

D

次回予告

次回は、grid-rowプロパティと grid-columnプロパティを使ってみよう。
これはラインの「番号」や「名前」を使ってアイテムを配置させるプロパティです。アイテム側の要素に指定します。