grid-auto-flow プロパティ
grid-auto-flow プロパティは、グリッドコンテナにおいて、子エレメント（グリッドアイテム）の並び順を横方向または縦方向に指定するプロパティです。
グリッドコンテナとは、display:grid; が設定されたエレメントです。
1 2 3 4 →main axis（主軸） 1 ┏ ━ ┳ ━ ┳ ━ ┳ ━ ┳ ┃ ┃ ┃ ┃ ┃ 2 ┣ ━ ╋ ━ ╋ ━ ╋ ━ ╋ ┃ ┃ ┃ ┃ ┃ 3 ┣ ━ ╋ ━ ╋ ━ ╋ ━ ╋ ┃ ┃ ┃ ┃ ┃ 4 ┣ ━ ╋ ━ ╋ ━ ╋ ━ ╋ ↓ cross axis（交差軸）
デフォルトのままではグリッドアイテムは横方向（主軸方向）に順次並べていきますが、grid-auto-flow プロパティによって並び順を縦方向（交差軸）に変更することができます。
grid-auto-flow プロパティは、grid-template、grid-template-columnsとgrid-template-rowsプロパティによって行列状にグリッドアイテムを並べる場合に有効です。
display: grid;
grid-template: 50px 50px 50px / 33% 33% 33%;
grid-auto-flow: column;
詳しくはExample
を参照してください。
dense値によって、グリッドコンテナ内に空きがでるような場合に自動で埋めることもできます。
ページ内 Index
構文(Syntax)
CSS
grid-auto-flow: row | column | dense | row dense | column dense ;
DOM ( JavaScript )
String = object.style.gridAutoFlow;
object.style.gridAutoFlow=" row | column | dense | row dense | column dense ";
値（Values）
| Value | 摘要 |
|---|---|
| row | 初期値（default値）、行方向に拡張 |
| column | 列方向に拡張 |
| dense | 空きスペースを埋めるように自動配置 |
| row dense | 行方向の空きスペースを埋めるように自動配置 |
| column dense | 列方向の空きスペースを埋めるように自動配置 |
備考（Remarks）
| 初期値（Default value） | row |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
グリッドアイテムの並びと大きさを指定
grid-auto-flowの例です。 column値に設定してあります。グリッドアイテムが縦に並んでいることが分かります。
関連する CSS プロパティ
grid-auto-flow プロパティには、以下の関連するプロパティがあります。
| display:grid; | 並びを設定することができるdisplayプロパティ |
| grid-area | グリッドアイテムに名称を指定 |
| grid-auto-columns | グリッドアイテムの幅 |
| grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
| grid-auto-rows | 全てのグリッドアイテムの高さ |
| grid-column | グリッドアイテムの列単位の位置と連結数 |
| grid-column-end | 列単位の位置や連結数 |
| grid-column-gap | 列同士のギャップ幅 |
| grid-column-start | 列単位（横）の位置や連結数 |
| grid-gap | グリッドアイテムどうしのギャップのサイズ |
| grid-row | 行単位の位置と連結数 |
| grid-row-end | 行単位の位置や連結数 |
| grid-row-gap | 行同士のギャップ幅 |
| grid-row-start | 行単位の位置や連結 |
| grid-template | グリッドアイテムの並び数やサイズ |
| grid-template-areas | グリッドアイテムの配置や連結 |
| grid-template-columns | グリッドアイテムの列の並び数、幅 |
| grid-template-rows | グリッドアイテムの行の並び数と高さ |