How to create a responsive multi-column list in css?

Question

css

The case is quite common, but for some reason I did not find examples on the network. It is necessary to arrange a text list in the form of several columns, arranging them as compactly as possible.

Conditions:
1. Do not use media-query and javascript.
2. The arrangement of elements is vertical. The first column is filled first, then the second.
3. The number of columns is selected automatically. Ideally, by the widest element in the column, in a compromise - in the form of a minimum and maximum value in pixels.
4. The number of lines (column height) is determined automatically.
5. Speakers are compact. The column should take up as much width as it actually needs.

Tried using grid:

.container
{    
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
    #grid-auto-flow: column;
}

After uncommenting the bottom line, the height of the columns becomes equal to one element, i.e. everything is lined up in 1 line.

Tried using column-width. But this value cannot be set flexibly. There are no options like minmax(150px,200px) or max-content. As a result, you have to use the width with a margin. In this case, columns with little content use the screen width inefficiently.

Played with flex too. But apparently this layout is not applicable for my case.

Answer 1

There is no magic, but the closest to implementation option is → columns. But it does not know how to adjust to the width of the text, unlike grids, but it knows how to vertically fill in columns.
So that's one of the two evils in general. Or wait another 20 years until something similar appears in the spec.