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

grid-auto-flowプロパティは、Gridアイテムを自動で流し込む方法を制御します。

これは、Gridレイアウトの一番最初の記事、
【62-1】Grid Layout の grid-template-rows, grid-template-columns
でもちょっと紹介しました。

grid-template-rows と grid-template-columnsプロパティで、単にトラックサイズだけ指定したら、アイテムが勝手に左上から自動的に流し込まれました。

これは、grid-auto-flowプロパティのデフォルト値がrows だから。
rows は、行方向（左上から横方向）にアイテムを自動配置します。
デフォルト値なので、grid-auto-flowプロパティの指定を何もしなくてもブラウザはこのように配置します。

grid-auto-flowプロパティを使って、アイテムを縦並びにしたり、すき間を埋めて並べたりもできます。

本日のINDEX

1. grid-auto-flowの値
2. row（デフォルト値）はヨコに自動で流し込む
   1. アイテムが複数のセルにスパンするときの自動配置
   2. 一部のアイテムを固定配置したときの自動配置
3. column はタテに自動で流し込む
4. dense は「すき間」を埋めながら自動で流し込む

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

【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-flowの値

値はキーワードが3つだけなのでとても簡単です。

grid-template-flowプロパティ
キーワード	row がデフォルト値。横方向（左から右）で流し込む column ：タテ方向（上から下）で流し込む dense ：すき間を埋めながら流し込む
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

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

値の書き方は、構文ではこうなっています。[ row | column ] || dense

これは、row と column はどっちか1つ（併用不可）。
dense は、row か column のどっちかと併用できる。無くても可という意味。

row はデフォルト値なので、指定をしなくても row です。
ですので値を書くとしたら、下の3パターンになります。
・column
・column dense（ dense column も同じ。順不同）
・dense（ row dense と同じ）

row（デフォルト値）はヨコに自動で流し込む

grid-auto-flow: row は、アイテムを左上端から横方向に自動配置します。
順序は HTMLで書かれた順番です。
行（row）が埋まると次の行を埋めます。必要なら新しい行を作って埋めていきます。

サンプルで試してみます。
まずは、HTMLでアイテムを6個用意します。

<div class="container">  <!--containerというクラス名を付けました-->
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSSで、2行・3カラムのグリッドを指定します。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div{padding:1em;text-align:center}	
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
.container div:nth-child(5) {background:#cff}
.container div:nth-child(6) {background:#ffebcd}

プレビューはこちら。
グリッドを作っただけで、アイテムの配置に関しては何も指定していませんが、アイテムは左上から横方向に自動配置されています。

A

B

C

D

E

F

これは下記のように書いたのと同じです。
grid-auto-flow を書くなら Gridコンテナ側（親）に書きます。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: row;
  }

アイテムが複数のセルにスパンするときの自動配置

1アイテムが 1セルでなく複数セルにスパンしていたら、grid-auto-flow はそれを避けて なるべく HTML順に自動配置します。

CSSをこのように指定してみました。
grid-auto-flow は指定していないので row です。
2番目のアイテム（B）をタテにスパンしました。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div:nth-child(2) {
  grid-area: span 2;
  }

grid-area: span 2 は、自動配置を利用したまま行方向は2セルにスパンする指定です。
詳しくはこちら→【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

プレビューはこちら。
E はちゃんと Bを避けて並んでますね。

A

B

C

D

E

一部のアイテムを固定配置したときの自動配置

一部のアイテムが固定配置されていたら、それ以外のアイテムを自動配置します。

CSSはこちら。
grid-auto-flow は指定していないので row です。
2番目のアイテム（B）と、4番目のアイテム（D）を、左側に寄るように固定配置しました。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div:nth-child(2) {
  grid-area: 1 / 1;
  }
.container div:nth-child(4) {
  grid-area: 2 / 1;
  }

grid-area: 1 / 1 は、行のスタートはライン1、カラムのスタートはライン1という意味。
終わり側を指定していないので auto = 1セルになります。
詳しくはこちら→【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

プレビューはこちら。
BとDは固定位置に、それ以外はそれらを避けて自動配置されます。

A

B

C

D

E

F

column はタテに自動で流し込む

grid-auto-flow: column は、アイテムを左上端からタテ方向に自動配置します。
順序は HTMLで書かれた順番です。
カラムが埋まると次のカラムを埋めます。必要なら新しいカラムを作って埋めていきます。

CSSで grid-auto-flow: column を指定します。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: column;
  }

プレビューはこちら。タテ方向に自動でセルに流し込まれます。

A

B

C

D

E

F

dense は「すき間」を埋めながら自動で流し込む

まずこちらを見てください。
Aの下に すき間ができています。自動配置だとたまにこんな事も起こります。

A

B

C

D

E

F

grid-auto-flow: dense を指定すれば、ほかのアイテムを前へ戻らせて「すき間」を埋めてくれます。HTML順になるべく近いアイテムですき間を埋めます。

A

B

C

D

E

F

CSSはこちら。

.container{
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense; /*すき間を埋める指定*/
  }
.container div:nth-child(2) { /*2番目のアイテム（B）*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }
.container div:nth-child(3) { /*3番目のアイテム（C）*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }
.container div:nth-child(4) { /*4番目のアイテム（D）*/
  grid-area: auto / span 2;   /*自動配置のまま横方向に2セルスパン*/
  }

grid-auto-flow: dense column も試してみます。
このすき間が、

A

B

C

D

埋まりますね。

A

B

C

D

CSSはこちら。

.container{
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: dense column; /*すき間を埋める指定とタテ方向の自動配置*/
  }
.container div:nth-child(1) { /*1番目のアイテム（A）*/
  grid-area: auto / span 2;   /*自動配置のまま横方向に2セルスパン*/
  }
.container div:nth-child(3) { /*3番目のアイテム（C）*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }

次回予告

次回は、grid-auto-rows と grid-auto-columnsプロパティを使おう。
これは、グリッドからはみ出したアイテムの トラックサイズをあらかじめ決めておけるプロパティです。