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

grid-areaショートハンドプロパティは以下の 4つの値を一括で指定できます。
・grid-row-start
・grid-column-start
・grid-row-end
・grid-column-end

前回は、
grid-rowショートハンド（grid-row-start、grid-row-end を一括指定）
grid-columnショートハンド（grid-column-start、grid-column-end を一括指定）
を使いましたが、今回は 4つすべてをまとめます。

本日のINDEX

1. grid-areaの値
2. grid-areaの値の書き順は「start / start / end / end」
3. grid-areaの値を省略するときの法則
4. 値が3個の場合
   1. 値が 3コの場合の例（エリアが1カラムの場合）
5. 値が2個の場合
   1. 値が 2コの場合の例-1（エリアが1行1カラムの場合）
   2. 値が 2コの場合の例-2（自動配置の場合）
6. 値が1個の場合
   1. 値が 1コの場合の例-1（エリア名）
   2. 値が 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 Editor's Draft
・CSS グリッドレイアウト | MDN

grid-areaの値

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

grid-areaプロパティ
キーワード	auto がデフォルト値。自動でアイテム配置するか、既定値「1（セル数）」をとる
CSS構文	<grid-line> [ / <grid-line> ]{0,3} 「ライン」を /（スラッシュ）で区切りながら 1〜4個まで書く <grid-line> = <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	グリッドアイテム またはグリッドコンテナを基準にする絶対配置ボックス

値そのものは、前回の grid-rowプロパティと grid-columnプロパティの値と同じです。ライン番号、ライン名、span値などの組み合わせでしたね。

それを複数 /（スラッシュ）で区切りながら書いていくんですが、書き順に決まりがあります。

grid-areaの値の書き順は「start / start / end / end」

grid-areaの4つの値は、順序がこのように決まっています。

row（行）と column（カラム）の start が先に並び、両方の end が後に続く形です。

最初に grid-row-start を書くと、次は同じ grid-row の end を書きたくなりますが、そこは我慢。column の start を2番目に書きます。（ややこしいよね〜）

grid-areaプロパティの書き方をサンプルで試してみます。
プレビューはこちら（毎度おなじサンプルでアレなんですが）

A

B

C

D

サンプルではこんなライン名を指定しています。

ライン名やライン番号で指定するとCSSはこうなりました。

.container{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  display:grid;
  grid-template: [top-start] 80px [second] 80px [end] 
               / [a-start] 1fr [b] 1fr [third] 1fr [end];
  }	
.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2 / b;
  background:#fcf}
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;  /*ライン名だけじゃなくライン番号も使ってます*/
  background:#ffc}
.container div:nth-child(3) {
  grid-area: second / b / end / 3;  /*ライン名だけじゃなくライン番号も使ってます*/
  background:#cfc}
.container div:nth-child(4) {
  grid-area: 2 / third / end / end; /*ライン名だけじゃなくライン番号も使ってます*/
  background:#eee}
.container div{padding:1em;text-align:center}

ちなみに HTMLはこちら

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

grid-areaの値を省略するときの法則

値は4コ全部書かなくても、いくつか省略することも可能です。
値を省略した場合にどうなるか、仕様で決まっています。

grid-column-end を省略すると、その grid-column-end は
grid-column-start が「任意の文字列（ライン名・エリア名）」の場合はその文字列に。
それ以外の場合は「auto」に設定される。

grid-row-end を省略すると、その grid-row-end は
grid-row-start が「任意の文字列（ライン名・エリア名）」の場合はその文字列に。
それ以外の場合は「auto」に設定される。

grid-column-start を省略すると、
grid-row-start が「任意の文字列（ライン名・エリア名）」の場合は、4つのすべての値がその文字列に。
それ以外の場合は、4つのすべての値が「auto」に設定される。

値が3個の場合

「値が3コ」とは、最後の grid-column-end が省略された場合です。

値が 3コの場合の例（エリアが1カラムの場合）

先程のサンプルソースで、「値3コ」で書ける部分を修正してみました。
「A」「C」「D」のアイテムは エリアの横方向が1カラムなので、最後の値を省略。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second / b / end;
  }
.container div:nth-child(4) {
  grid-area: 2 / third / end;
  }

この例では、grid-column-start は「任意の文字列」。
grid-column-end を略すと grid-column-start の文字列と同じになる決まりですが、start と end が同じ値だとエラーになり「span 1」と等価になる決まりもあります。
なので、横方向1カラム分になるアイレムは省略OKなんです。

もしも 始まり側がライン番号（数値）なら、終わり側は auto になりますので、コレも autoの既定値「1」で1カラム。
1カラムのエリアなら最後の値は略してOKということですね。

プレビューはこちら。

A

B

C

D

値が2個の場合

「値が2コ」なら grid-row-start と grid-column-start がある場合です。

値が 2コの場合の例-1（エリアが1行1カラムの場合）

始まり側の値が「ライン名」なら「任意の文字列」なので、終わり側も同じ文字列になり、エラーにより「span 1」が適用されて 1行、または1カラムになります。

始まり側が「ライン番号」なら終わり側は auto になるので、これも既定値「1」が適用されて 1行、または1カラムになります。

先程のサンプルソースで、 1行1カラムのアイテム（CとD）を「値2コ」で書き直すとこうなります。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second / b;
  }
.container div:nth-child(4) {
  grid-area: second / third;
  }

プレビューはこちら。

A

B

C

D

値が 2コの場合の例-2（自動配置の場合）

1行1カラムじゃなくても、自動配置を使う場合は、値2コで書くこともあります。

始まり側が auto だと、アイテムは「自動配置」になり、HTMLソースで並んでる順に左上からアイテムが流し込まれます。

これは、grid-auto-flowプロパティが効いているから。
grid-auto-flowプロパティは指定しなくても デフォルト値 row が効いているので。
（grid-auto-flowプロパティについては次回記事にします）

上のサンプルのソースを自動配置を利用して書くとこのようになります。

.container div:nth-child(1) {
  grid-area: span 2;
  }
.container div:nth-child(2) {
  grid-area: auto / span 2;
  }
/*1行1カラムのアイテム（CとD）は指定ごと省略*/

2番目のアイテム（B）は、値が「auto / span 2」の2個です。
最初の grid-row-start は auto にして自動配置させます。
次の grid-column-start は span 2 で 2カラム使用。

プレビューです。

A

B

C

D

値が1個の場合

「値が1コ」だと grid-row-start だけがある場合です。

値が 1コの場合の例-1（エリア名）

サンプルのエリア「C」の値を最初の1コだけにしてみました。
まあこうなりますわなあ。レイアウトが崩れました。

A

B

C

D

CSSはこちら。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second;
  }
.container div:nth-child(4) {
  grid-area: second / third;
  }

「ライン名」なら、4つの値はすべて同じ文字列になるので、エラーになります。
「ライン番号」は、他の3つが auto になるので、行の開始位置しか指定できません。

grid-areaプロパティで「文字列1つだけ」指定する方法は、
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
で使いましたね。

前回の
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティの「エリア名」で位置を指定する でも、値を全部エリア名にすれば、エリア指定できることを紹介しました。今回の grid-areaショートハンドで、これを一括で指定できるというわけです。

/*grid-row と grid-column でエリア名を指定した場合*/
.container div:nth-child(1) {
  grid-row: areaA / areaA;
  grid-column: areaA / areaA;
  }
.container div:nth-child(2) {
  grid-row: areaB / areaB;
  grid-column: areaB / areaB;
  }
.container div:nth-child(3) {
  grid-row: areaC / areaC;
  grid-column: areaC / areaC;
  }
.container div:nth-child(4) {
  grid-row: areaD / areaD;
  grid-column: areaD / areaD;
  }

というわけで、サンプルをエリア名で指定した CSSはこちら。
（この場合はコンテナ側に grid-template で「エリア指定」しないと意味無いです）

.container{
  display:grid;
  grid-template: "areaA areaB areaB" 80px
                 "areaA areaC areaD" 80px
               / 1fr 1fr 1fr;
  }
.container div:nth-child(1) {
  grid-area: areaA;
  }
.container div:nth-child(2) {
  grid-area: areaB;
  }
.container div:nth-child(3) {
  grid-area: areaC;
  }
.container div:nth-child(4) {
  grid-area: areaD;
  }

プレビューはこちら。まともですね。

A

B

C

D

値が 1コの場合の例-2（自動配置の場合）

値1コの場合で、span値だけ使うこともあります。
デフォルトの grid-auto-flow: row の自動配置を利用する場合、タテ方向だけスパンするなら値をその span値だけで指定できます。

サンプルのCSSです。

.container div:nth-child(1) {
  grid-area: span 2;
  }
.container div:nth-child(2) {
  grid-area: auto / span 2;
  }
/*1行1カラムのアイテム（CとD）は指定ごと省略*/

最初のアイテム（A）は、値が「span 2」だけです。残りの3つの値は auto になります。
これでタテ方向だけ2行分スパンします。

プレビューです。

A

B

C

D

自動配置を利用すれば、「値1つ」でタテ方向にスパンするのは自由自在です。
別のサンプルも作ってみました。

A

B

C

D

E

CSSです。

.container div:nth-child(2) {
  grid-area: span 3;
  }
.container div:nth-child(4) {
  grid-area: span 2;
  }
.container div:nth-child(5) {
  grid-area: span 2;
  }
  /*1行1カラムのアイテム（AとC）は指定ごと省略*/

次回予告

次回は、grid-auto-flowプロパティを使おう。
grid-auto-flowプロパティは、アイテムを自動配置します。
自動配置でアイテムの並びに「すき間」ができたとしても、その「すき間」を自動で埋めることも可能です。