How to make the number of columns depending on the number of elements in the container?

Question

css

I want to do something like this.
I understand that it is possible through grids, but I do not know how.
It is important that the elements begin to fill in the first column, and when they reach 6, they would be transferred to another column.

Answer 1

display:grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, 1fr);

Answer 2

The parent can put the flow on the vertical axis and add the transfer of elements on overflow. For overflow to occur, you need to limit the height of the parent.

display: flex;
flex-direction: column;
max-height: 100px;
flex-wrap: wrap;