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

Gridアイテムの数が増えて 設定したグリッドからはみ出す場合もあります。

こんなはみ出したアイテムが作る 暗黙的グリッドのトラックサイズをあらかじめ決めておけるのが、今回の grid-auto-rows と grid-auto-columnsプロパティです。

アイテム数が決まっていない（どんどん増える）場合に使えるやつです。

本日のINDEX

1. grid-auto-rows と grid-auto-columns の値
2. 暗黙的なグリッドとは
   1. 暗黙的グリッドは「下側（row）」か「右側（column）」にできる
3. grid-auto-rows で暗黙的な 行（row）を指定
   1. 値が1つなら、暗黙的な行はそれで統一
   2. 値が複数なら、そのパターンで row を繰り返す
4. grid-auto-columnsで暗黙的なカラム(column)を指定
   1. 値が1つなら、暗黙的なカラムはそれで統一
   2. 値が複数なら、そのパターンで column を繰り返す
5. 暗黙的グリッドとライン番号（マイナスで注意）

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

【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-auto-rows と grid-auto-columns の値

grid-auto-rows と grid-auto-columns の値は、grid-template-rows と grid-template-columns の値とほぼ同じです。どっちもトラックサイズを決めるので。

grid-template-rows と grid-template-columns の値との違いは以下の3点です。
・ライン名・ライン番号・エリア名 での指定は不可（当然ですけどね）
・repeat( ) 関数も不可（値を指定すればそれを繰り返すので）
・subgrid（サブグリッド）が使えない

grid-template-rowsプロパティ grid-template-columnsプロパティ
キーワード	auto がデフォルト値。アイテムの内容に合わせてトラックサイズが決まります。 最大サイズになれるときは内容のサイズそのものに。最小サイズにすべきときは、カラムなら一番文字数の多い単語の横幅に合わせます。
<length>	正の数値に単位（px, em, rem など）を付けて指定（マイナスの値不可）
パーセンテージ	親コンテナのサイズに対するパーセンテージ（マイナスの値不可） コンテナのサイズがトラックサイズに依存する場合は auto を使うこと
<flex>	単位「fr」を使ったトラックのフレックス係数を指定（マイナスの値不可）
max-content	内容（エリア内のテキストなど）に合わせて最大値にする
min-content	内容（エリア内のテキストなど）に合わせて最小値にする
fit-content( )	指定値が、内容によって可能な最小サイズ〜最大サイズの間であればそれを使い、それよりはみ出すようなら最小サイズか最大サイズの近い方を使う
minmax(min, max)	サイズの最小値・最大値を決めておき、画面サイズが変わっても、その値以下・以上にならないようにする
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

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

値の詳細については、下記をご覧ください。
（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )

grid-auto-rows、grid-auto-columnsプロパティは Gridコンテナ（親要素）側に指定します。
grid-auto-rows と grid-auto-columns と、最後の rows や columns が複数形になっていますね。間違えて grid-auto-row、grid-auto-column などと指定しても何も起こらないので要注意です。

暗黙的なグリッドとは

暗黙的（implicitly）というのは、明示的（explicitly）と比較してのこと。

grid-template-rows と grid-template-columns での指定は明示的（explicitly）な指定です。
この2つで、きっちりとトラックサイズを指定しましたね。
grid-template-rows で行のトラックサイズ、grid-template-columns でカラムのトラックサイズを決めることによって、グリッドが切られてセル数が決まりました。

このとき、アイテムが多くて、きっちり決めたグリッドからはみ出すと、暗黙的なグリッドが自動的に作られて Gridコンテナ内に配置されるようになっているんです。

grid-row, grid-columnプロパティで意図的に グリッド範囲外にアイテム配置を指定しても暗黙的なグリッドは作られます。

サンプルで暗黙的グリッドとやらを見てみましょう。
このような、1行・3カラムのグリッドを用意します。

A

B

C

HTMLはこちら

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

CSSはこちら。明示的に 1行・3カラムを指定しています。

.container{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template-rows: 80px;  /*1行*/
  grid-template-columns: repeat(3, 1fr);  /*3カラム*/
  }
.container div{
  padding:1em;
  text-align:center;
  }

もう1個アイテムを追加してみます（D）
無いはずの2行目に配置されましたね。これが暗黙的グリッドってやつ。
カラムは明示的なグリッドのまま（すぐ上のAと幅が揃っています）
行（row）は暗黙的なので、高さが auto になっていますね。（autoで最小サイズ=テキストの高さと padding の合計にされています）

A

B

C

D

さらにもう1個「E」を増やして、3行目の2カラム目に指定してみます。
下記のように、5個目のアイテム側に位置指定をして、rowは3行目、カラムは2個目にします。

.container div:nth-child(5) {
  grid-row: 3;
  grid-column: 2;
  }

プレビューはこちら。3行目にいますね。

A

B

C

D

E

では、アイテム「D」も「E」も、2つとも3行目に指定してみます。

.container div:nth-child(4) {
  grid-row: 3;
  }
.container div:nth-child(5) {
  grid-row: 3;
  grid-column: 2;
  }

プレビューはこちら。
2行目にアイテムが無いので、2行目に詰められちゃいます。

A

B

C

D

E

暗黙的グリッドは、「トラックサイズが指定されていなければ」、間にアイテムがない状態なら自動で詰めて配置する仕様です。

今日のテーマの grid-auto-rows, grid-auto-columnsプロパティで「トラックサイズを指定すれば」アイテムが無くても詰めたりせず、指定通りに配置されます。
これは、この後サンプルを使って見てみましょう。

暗黙的グリッドは「下側（row）」か「右側（column）」にできる

まず、暗黙的グリッドがどこにできるかについて。

上のサンプル↑は、grid-auto-flow: row の環境ですので 行方向（row）の暗黙的グリッドができています。
grid-auto-flow: row は、左上から横方向にアイテムを流し込むので、アイテムが余ったら下の方の行に暗黙的グリッドが作られるわけです。

grid-auto-flow: column の場合は、カラム方向（column）の暗黙的グリッドができます。こちらは左上からタテ方向にアイテムを流し込むので、アイテムが余ったら右の方のカラムが暗黙的グリッドとして増えていきます。

grid-auto-flowプロパティに関しては、こちらをご覧ください。
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

grid-auto-rows で暗黙的な 行（row）を指定

それではやっと本題です。暗黙的グリッドのトラックサイズを指定してみよう。
まずは grid-auto-rowsプロパティから使ってみます。

値が1つなら、暗黙的な行はそれで統一

先程のサンプルで、grid-auto-rowsプロパティで暗黙的グリッドの行を高さを 120pxにしてみます。（あえて明示的なグリッドの高さ80pxと違うサイズにしています）

.container{
  grid-template-rows: 80px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  }
.container div:nth-child(4) {
  grid-row: 3;
  }
.container div:nth-child(5) {
  grid-row: 3;
  grid-column: 2;
  }

プレビューはこちら。
2行目以降は暗黙的グリッドですが、暗黙的グリッドのサイズが指定されたので、アイテムはちゃんと3行目に配置されました。2行目に詰められないんですね。

A

B

C

D

E

grid-auto-rows: 120px と値を1コ書いただけで、ず〜っと行の高さは同じ 120px という指定になります。grid-auto-rows に repeat( )関数は不要（意味無い）ってことです。

最初から row の指定は grid-auto-rows だけで（grid-template-rowsなし）で書いてみます。

.container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 70px;
  }
.con32 div:nth-child(3) {
  grid-area: span 2;  /*3番目のアイテムCだけタテ方向に2セル分スパン*/
  }

プレビューはこちら。
問題ないですね。これなら、ずっとアイテムが増え続けるサイト（何行か最初に決められない）にも使えます。

A

B

C

D

E

F

G

H

値が複数なら、そのパターンで row を繰り返す

複数の値を指定すると、そのパターンで繰り返します。
下記のサンプルは、grid-auto-rows: 70px 4em 100px と3つの値を指定しました。

.container{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /*2カラムに固定*/
  grid-auto-rows: 70px 4em 100px; /*複数の値*/
  }
.container div:nth-child(2), {  /*2番目と4番目のアイテム（BとD）をタテ方向に2セル分スパン*/
.container div:nth-child(4) {
  grid-area: span 2;
  }

プレビューはこちら。
row が、70px 4em 100px を繰り返していくのがわかります。

A

B

C

D

E

F

G

H

grid-auto-columnsで暗黙的なカラム(column)を指定

では、grid-auto-columnsプロパティも使ってみます。
カラムの場合は、grid-auto-flow: column を指定した場合に、明示的なカラムが無くなったら右側に暗黙的なカラムを作ります。

値が1つなら、暗黙的なカラムはそれで統一

CSSで次のように指定します。

.container{
  display:grid;
  grid-auto-flow: column;  /*タテ方向の流れで配置*/
  grid-template-rows: repeat(2, 70px);  /*2行の明示的rows*/
  grid-template-columns: repeat(2, 70px);  /*2カラムの明示的columns*/
  grid-auto-columns: 200px;  /*暗黙的カラムは 200px*/
  overflow:auto;
  }
.container div:nth-child(3),
.container div:nth-child(6) { /*3番目と6番目のアイテムC,F をタテに2セル分スパン*/
  grid-row: auto / span 2;
  }

プレビューです。
暗黙的カラムは 3カラム目のDからですが、ずっと同じ 200pxのトラックサイズですね。

A

B

C

D

E

F

G

H

値が複数なら、そのパターンで column を繰り返す

CSSはこのように書いています。
カラムは grid-template-columns を指定せずに、暗黙的なカラムの grid-auto-columns だけで書いています。

.container{
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 70px); /*2行にしました*/
  grid-auto-columns: 3em 70px 200px; /*3つの値*/
  overflow:auto;
  }
.container div:nth-child(3),
.container div:nth-child(8) { /*3番目と4番目のアイテムC,H をタテに2セル分スパン*/
  grid-row: auto / span 2;
  }

プレビューはこちら。
grid-auto-columns の複数指定は 3em 70px 200px を繰り返していますね。

A

B

C

D

E

F

G

H

I

J

K

L

暗黙的グリッドとライン番号（マイナスで注意）

マイナスのライン番号は、暗黙的グリッドの位置にちょっとした影響があります。

このサンプルは、下記のように1行・3カラムです。

  grid-template-rows: 80px;
  grid-template-columns: repeat(3, 1fr);

grid-auto-flow は指定していませんので、デフォルトの row。
ですので、暗黙的グリッドは下の方にできます。2行目から暗黙的グリッドです。

A

B

C

D

E

アイテム「A」にマイナスのライン番号で、grid-row: -2 / -1 と指定してみます。

.container div:nth-child(1) { /*1番目のアイテム（A）*/
  grid-row: -2 / -1; /*rowは下から2番目から一番下までの間*/
  }

こんな感じで何も変わらないです。

A

B

C

D

E

サンプルのグリッドはもともと1行しかありませんから、grid-row: -2 / -1 だと明示的グリッドの最後のラインとその２番めのラインを指し、 A の位置は変わらないんです。

では、アイテム「B」にもマイナスのライン番号で指定します。
「B」は A より上になるように grid-row: -3 / -2 としました。

.container div:nth-child(1) { /*1番目のアイテム（A）*/
  grid-row: -2 / -1; /*rowは下から2番目から一番下までの間*/
  }
.container div:nth-child(2) { /*2番目のアイテム（B）*/
  grid-row: -3 / -2; /*rowは下から3番目から下から2番目までの間*/
  }

プレビューはこちら。
「A」は下に、「B」はその上になって、その他のアイテムは自動配置になってます。

A

B

C

D

E

ここで注目なのは、明示的グリッド（高さ80pxのrow）が下になっていること。
もともと1行の明示的グリッド（rowはライン-2〜-1）に Bの grid-row: -3 / -2 が加わったので、暗黙的グリッドが 上の位置にできたんですね。

更にアイテムを増やしたら、こうなります。

A

B

C

D

E

F

G

H

Bの grid-row: -3 / -2 のせいで、暗黙的グリッドが1行だけは上にできていますが、その後の暗黙的グリッドは素直に下方向にできるんです。

ライン番号の基準はあくまでも明示的グリッド。
プラスのライン番号なら、明示的グリッドの 最初のライン1 が基準に。
マイナスのライン番号なら、明示的グリッドの 最後のライン-1 が基準になります。

次回予告

次回は、gridショートハンドプロパティを使おう。
これは、Gridコンテナ側にする指定を一括できるショートハンドです。