Как в css создать адаптивный список в виде нескольких колонок?

Question

[karpo518]

Кейс достаточно распространенный, но почему-то примеров в сети не нашёл. Нужно оформить текстовый список в виде нескольких колонок, расположив их максимально компактно.

Условия:
1. Не использовать media-query и javascript.
2. Порядок расположения элементов вертикальный. Сначала заполняется первая колонка, потом вторая.
3. Количество колонок подбирается автоматически. В идеале по самому широкому элементу в колонке, компромиссно - в виде минимального и максимального значения в пикселях.
4. Количество строк (высота колонок) определяется автоматически.
5. Колонки располагаются компактно. Колонка должна занимать столько ширины, сколько ей на самом деле требуется

Пробовал использовать grid:

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

После раскомментирования нижней строки высота колонок становится равной одному элементу, т.е. всё выстраивается в 1 строку.

Пробовал использовать column-width. Но эта величину нельзя задать гибко. Нет таких вариантов, как minmax(150px,200px) или max-content. В результате приходится использовать ширину с запасом. В таком случае колонки с небольшим количеством контента неэффективно используют ширину экрана.

С flex тоже игрался. Но видимо этот layout не применим для моего случая.

Answer 1

[Арсений Матыцин]

Магии не существует, но ближайший к реализации вариант → columns. Но он не умеет подстраиваться под ширину текста, в отличие от гридов, зато умеет в вертикальное заполнение по колонкам.

Так что тут одно из двух зол в общем-то. Или ждать еще лет 20, пока в спеке появится что-то подобное.