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

gridショートハンドプロパティは、Gridコンテナ側にする指定を一括でまとめます。

まとめるのは、
明示的グリッドを指定するプロパティ3個
・grid-template-rows
・grid-template-columns
・grid-template-areas
と、暗黙的グリッドを担当するプロパティ3個
・grid-auto-rows
・grid-auto-columns
・grid-auto-flow
の合計6個です。

とはいえ同時に指定できない（矛盾する）プロパティもあるので、gridショートハンドの指定のしかたは3パターン用意されています。
今回はこのルールを見ていきましょう。

本日のINDEX

1. gridプロパティの値
2. パターン1：エリア指定用
3. パターン2：横方向に伸びていくレイアウト用
4. パターン3：タテ方向に伸びていくレイアウト用
5. サンプルで試してみよう
   1. パターン1：エリア指定用＜サンプル＞
   2. パターン2：横方向に伸びていくレイアウト用＜サンプル＞
   3. パターン3：タテ方向に伸びていくレイアウト用＜サンプル＞
   4. サイズ指定の値はロングハンドで指定できるものは全部OK

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

【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プロパティの値

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

gridプロパティ
キーワード	none がデフォルト値。明示的なグリッドがまったく無いことになる。 が、暗黙的グリッドは作られる。
CSS構文	<'grid-template'> grid-templateショートハンドの grid-template-areas の値も加えた書き方と同じ。 指定されない他3つのプロパティの値は初期化されます。
	<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? これは横方向に伸びていくグリッドレイアウトに。
	[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> これはタテ方向に伸びていくグリッドレイアウト用。
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

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

値の CSS構文が 3パターンあります。
パターン1：エリア指定用
パターン2：横方向に伸びていくレイアウト用
パターン3：タテ方向に伸びていくレイアウト用

では、3つのパターンを1つずつ見ていきましょう。

パターン1：エリア指定用

構文 <'grid-template'> は、grid-templateショートハンドの値を書くという意味です。
こちらでやりましたね↓
【62-3】セルやエリアを一括指定する grid-templateショートハンド

grid-templateショートハンドの値の書き方は2パターンありましたが、2番目の
grid-template-areas の値も加えて一括で
の書き方そのまんまでOK。
grid-template-rows
grid-template-columns
grid-template-areas
が一括で書けます。
エリア指定をしたいときの書き方ですね。

こんな書き方でしたね↓
1行（row）ずつ エリア分割と行の高さを行数ぶん書き、
最後に「/」で区切ってカラムの幅を 1カラムずつ別けて書きます。
repeat( )関数は使用不可。

上のコードを gridショートハンドで書くとこうなります。

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

ただし、gridショートハンドで上記の書き方をしたら、指定しなかった 暗黙的グリッドを指定する3つのプロパティ
・grid-auto-rows
・grid-auto-columns
・grid-auto-flow
が初期化されます。
（値が初期値に設定されるということ。どのショートハンドでも、書かないヤツは初期化されます）

この場合はエリア指定をしているので、暗黙的グリッドが作られるのを期待する状況はないだろう と思われるので、たいていはそのまま初期化でイイはず。
もしも必要だったら gridショートハンドの後に書き足せばOKです。

パターン2：横方向に伸びていくレイアウト用

パターン2の書き方の CSS構文はこうなっています。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

構文の記号は、
[ ] は、ひとまとまりの意味。
&& は、両方必須だけど順不同。
? は、省略可能。あっても無くてもいいという意味。

/（スラッシュ）の
左側は、行（rows）のトラックサイズを、明示的に指定。
右側は、カラム（columns）のトラックサイズを暗黙的に指定するパターンです。

ですのでこれは横方向に伸びていくグリッドレイアウトに最適です。

構文を読み解いて、図説するとこうなります。

行のトラック指定はキッチリ決めて、カラムは暗黙的トラックサイズのみ指定するので、当然 grid-auto-flow は column（タテ方向に自動配置して、カラムが足りなければ暗黙的に増やす = 横方向に伸びていく）じゃないといけません。
このパターンで書くキーワード auto-flow は、grid-auto-flow: column と指定したことになります。

パターン3：タテ方向に伸びていくレイアウト用

3番目の CSS構文はこうなっています。
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

構文の記号は、
[ ] は、ひとまとまりの意味。
&& は、両方必須だけど順不同。
? は、省略可能。あっても無くてもいいという意味。

これはさっきと逆で、/（スラッシュ）の
左側は、行（rows）のトラックサイズを、暗黙的に指定。
右側は、カラム（columns）のトラックサイズを明示的に指定するパターン。

ですのでこれはタテ方向に伸びていくグリッドレイアウト用です。

構文を図説するとこうなります。

行は暗黙的サイズ指定だけ、カラムはキッチリ決めるので、当然 grid-auto-flow は row（横方向に自動配置して、行が足りなければ暗黙的に増やす = タテ方向に伸びていく）じゃないといけません。
このパターンで書くキーワード auto-flow は、grid-auto-flow: row と指定したことになります。

サンプルで試してみよう

それでは、それぞれのパターンの書き方を実際に試してみます。

パターン1：エリア指定用＜サンプル＞

これは、前にやった grid-templateショートハンドの書き方なので簡単ですね。

こんなレイアウトを作ってみます。

header

main contents

footer

navi

side

ad

Gridコンテナの CSSはこちら。

.container1{
  border:1px solid#ccc;
  box-sizing:border-box;
  padding:0;
  display: grid;
  grid:
      "header header header" 4em
	  "nav    main   ad"     5em
	  "nav    main   side"   1fr
	  "footer footer footer" 3em
	  / 5em 1fr 5em;
  }

HTMLはこちらです。

<div class="container1">
  <div class="header">header</div>
  <div class="main">main contents</div>
  <div class="footer">footer</div>
  <div class="nav">navi</div>
  <div class="side">side</div>
  <div class="ad">ad</div>
</div>

パターン2：横方向に伸びていくレイアウト用＜サンプル＞

構文は、
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? でしたね。

このように CSSを指定しました。

.container2{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid: repeat(3, 3em) / auto-flow 200px; /*行は固定で3行、カラムは自動でサイズは200px*/
  overflow:auto; /*スクロールバーを出すようにしています*/
  }
.container2 div:nth-child(even) {background:#ffc} /*偶数セルの色指定*/
.container2 div:nth-child(odd) {background:#cff}  /*奇数セルの色指定*/

HTMLはこちらです。

<div class="container2">
  <div></div>  <!--アイテム9個です-->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

プレビューはこちら。

アイテムを増やしました。

<div class="container2">
  <div></div>  <!--アイテム12個です-->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

行数は変わりませんが、カラムが右方向に増えていきます。

パターン3：タテ方向に伸びていくレイアウト用＜サンプル＞

パターン3の構文は、
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> でしたね。

このように CSSを指定しました。

.container3{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid: auto-flow 80px / repeat(3, 1fr); /*行は自動でサイズは80px、カラムは3カラムに固定*/
  height:160px;  /*高さを限定して*/
  overflow:auto; /*スクロールバーを出すようにしています*/
  }
.container3 div:nth-child(even) {background:#fcf} /*偶数セルの色指定*/
.container3 div:nth-child(odd) {background:#eee}  /*奇数セルの色指定*/

HTMLはこちらです。

<div class="container3">
  <div></div>  <!--アイテム6個です-->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

プレビューはこちら。

アイテムを増やしました。

<div class="container3">
  <div></div>  <!--アイテム12個です-->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

カラムは変わりませんが、行数が下方向に増えていきます。

サイズ指定の値はロングハンドで指定できるものは全部OK

トラックサイズ指定の値は、以下の記事に登場するものが使えます。ライン名とかね。
（ちょっとメモ）サイズ指定で使う値について
【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns

下は MDNに掲載されているサンプルソースです。
使い方がわかりやすいので、そのままコピペさせていただいています。
掲載されているページはこちら→ grid - CSS: カスケーディングスタイルシート | MDN

/* パターン1：<'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* パターン2：<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? */  
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* パターン3：[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> */  
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

次回予告

次回は、Grid Layout で使える orderプロパティ、position-absolute、z-indexプロパティを見てみましょう。
orderプロパティは Flexbox だけでなく Grid Layout でも使えます。
そして、position-absolute や z-index は、他の要素で使うのとちょっと違うんです。