Display list in several columns and keep the number of elements per column equal when their heights are different [duplicate]

I simply need to have an unordered list displayed in 3 columns, but without vertical alignment.

Is there a way to remove the gap between the list element no. 2 and no. 5 in this example?

I already tried flexbox, float, table, column and grid layout and can't figure it out, although it looks simple at first glance.

A JS solution would also be OK, but i can't alter the HTML output. And i don't know the item's heights, so i don't need a solution with fixed pixel values.

If there is a solution for this, the following sorting would also be a nice gimmick, but i think i may figure that one out after i get a starting point:

1 3 52 4

ul {   list-style-type: none;   padding: 0;  color: white;   text-align:center;}.small {   height: 30px}.large {  height: 200px}li {  background:red;}li:nth-child(2n) {   background:blue;}ul {  display: grid;   grid-template-columns: repeat(3, minmax(0, 1fr));}

<ul><li class="large">1</li><li class="small">2</li><li class="small">3</li><li class="small">4</li><li class="small">5</li></ul>

Desired result:

Edit: This question was closed before and i was pointed to CSS-only masonry layout with the notice about a duplicate but the question there is about masonry layouts, which isn't the case here. In the linked answer, the item no. 4 (in the first column) would float into the second row, as a masonry layout is trying to have equal heights for the resulting columns. The question here is about to have the same amount of items in every column (until there are no items left). I already tried the solution over there and it didn't work unsurprisingly.