How can I prevent grid-auto-flow from creating new columns?

Question

I have a ul of unknown length.

I want to arrange this ul into a grid. The grid must have 4 columns and be column-based, like follows:

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

This can be achieved with:

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

However, if I then add more li's into the ul, it overflows and begins creating new columns:

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

when what I want is for it to create new rows, because I can only have 4 columns:

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

How can I block the creation of new columns and force only new rows to be created?

I don't believe I can use a flexbox with flex-direction:column and flex-wrap:wrap, as I don't have a defined height of the final ul.

I've even tried to create a grid using grid-auto-flow:row and then transpose it using transforms, but I think that will only work for square grids.

Question has been marked as duplicate, but the other question only wants to know know to make the grid flow in columns.