CSS

The `grid-auto-flow` property in CSS specifies how unpositioned items within a grid should be automatically placed either in row or column direction.

grid-auto-flow

　CSSの grid-auto-flowプロパティは、グリッドコンテナ内のアイテムの自動配置方法を指定するために使用されます。特に、明示的に配置されていないグリッドアイテムがどのようにグリッドに配置されるかを制御します。

row（デフォルト値）

アイテムは行方向（横方向）に自動的に配置されます。すべての行が満たされるまで左から右に、上から下に順に配置されます。

column

アイテムは列方向（縦方向）に自動的に配置されます。すべての列が満たされるまで上から下に、左から右に順に配置されます。

dense

rowや columnと組み合わせて使用されます。隙間を埋めるためにアイテムが可能な限り小さな隙間に詰め込まれます。例えば、grid-auto-flow: row dense; や grid-auto-flow: column dense;のように使います。

Sample

grid-auto-flow: row; の場合

grid-auto-flow: column; の場合

<div class="container-row">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<div class="container-column">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

.container-row, .container-column {
	background-color: palegreen;
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.container-row {
	grid-auto-flow: row;
	grid-template-columns: repeat(2, 100px);
}

.container-column {
	grid-auto-flow: column;
	grid-template-columns: repeat(2, 100px);
}

.container-row div, .container-column div {
	background-color: green;
	padding: 20px;
	text-align: center;
}

grid-auto-flow: row;

各行に順にアイテムが配置されます。上から下に、左から右に並びます。

grid-auto-flow: column;

各列に順にアイテムが配置されます。左から右に、上から下に並びます。