如何防止grid-auto-flow创建新列？

Question

我有一个长度未知的ul。

我想将此ul排列成网格。网格必须有4列并且必须基于列，如下所示：

1  6  11 16 
2  7  12 17 
3  8  13 18 
4  9  14 
5  10 15 

这可以通过以下方式实现：

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: 10px;
}

但是，如果我随后在ul中添加更多li，则会溢出并开始创建新列：

1  6  11 16 21 
2  7  12 17 22 
3  8  13 18 23 
4  9  14 19 
5  10 15 20 

当我想要创建新行时，因为我只能有4列：

1  7  13 19 
2  8  14 20 
3  9  15 21 
4  10 16 22 
5  11 17 23
6  12 18 

如何阻止新列的创建并仅强制创建新行？

我不相信我可以在flex-direction:column和flex-wrap:wrap上使用flexbox，因为我没有最终ul的定义高度。

我什至尝试使用grid-auto-flow:row创建网格，然后使用转换将其转置，但我认为这仅适用于正方形网格。

该问题已被标记为重复，但另一个问题只想知道使网格按列流动。