grid-auto-flowで配置方法を指定する

元々のレイアウト(grid-auto-flow: row;)

.grid {
	display: grid;
	grid-template-columns: repeat(3, 150px);
	grid-template-rows: repeat(3, 150px);
}
.grid > div span {
	font-size: 30px;
	font-weight: bold;
}
.grid > div:nth-of-type(1) {
	background-color: #ff8bd5;
	grid-column: 1/3;
}
.grid > div:nth-of-type(2) {
	background-color: #e8ff7c;
	grid-column: 2/4;
}
.grid > div:nth-of-type(3) {
	background-color: #8eff7c;
}
.grid > div:nth-of-type(4) {
	background-color: #7c88ff;
}
.grid > div:nth-of-type(5) {
	background-color: #d00022;
}

#grid_2 {
	grid-auto-flow: column ;
}

column を指定すると左上から縦方向に配置されます。
２番の隣が空白だったので３番がそこに配置されました。

#grid_3 {
	grid-auto-flow: dense;
}

denseは「密集」という意味ですが、dense を指定すると可能な限り隙間を埋めながら横方向に配置されます。