对于根据需要创建新列且未定义行的垂直流动网格，请考虑使用CSS 多列布局 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts (example https://stackoverflow.com/a/44099977/3597276）。 CSS 网格布局（至少是当前的实现 -Level 1 https://www.w3.org/TR/css-grid-1/) 无法执行此任务。问题是这样的：
在 CSS 网格布局中，之间存在反比关系grid-auto-flow and grid-template-rows / grid-template-columns特性。
更具体地说，与grid-auto-flow: row（默认设置）和grid-template-columns两个定义的网格项都在水平方向上很好地流动，根据需要自动创建新行。这个概念在问题的代码中得到了说明。
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
但是，切换到grid-template-rows，网格项堆叠在单列中。
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
没有自动创建列grid-auto-flow: row and grid-template-rows. grid-template-columns必须定义（因此，与grid-auto-flow).
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
在相反的情况下，同样的行为也是如此。
With grid-auto-flow: column and grid-template-rows两个定义的网格项都在垂直方向上很好地流动，根据需要自动创建新列。
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
但是，切换到grid-template-columns，网格项堆叠在一行中。 （这是大多数人问的问题，包括在这个问题中。）
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
不会自动创建行。这就需要grid-template-rows被定义为。 （这是最常提供的解决方案，但通常会被拒绝，因为布局的行数是可变的。）
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
因此，考虑一个多列布局解决方案 https://stackoverflow.com/a/44099977/3597276，如上所述。
规格参考：7.7.自动放置：grid-auto-flow财产 http://www.w3.org/TR/css3-grid-layout/#grid-auto-flow-property
