Как адаптивно сверстать 5 элементов списка разной высоты?

Question

[Лобстер]

Здравствуйте. Есть вот такая секция:

Не хочется исспользовать masonry.
Можно использовать медиа-запросы и сделать что-то на подобии адаптивной галереи, но тогда останутся большие промежутки. Так как списки разной высоты. Не подскажите как правильно сверстать эту секцию? Чтобы блыо красиво и правильно.
https://jsfiddle.net/k4cL2ppj/

Answer 1

[Сергей delphinpro]

без masonry только column-count (и все остальные из этого семейства). В вашем случае колонок должно хватить.

Comments

[Лобстер]

Да я думал об этом. Но решил всё таки спросить, может быть и есть какой иной способ

[Сергей delphinpro]

Тостер: есть конечно, но он не работает пока еще =)

[Лобстер]

Сергей: Спасибо за ответ

[Лобстер]

Ankhena W: я не понял того что у вас в скобочках написано. видно же на скрине что у мня 6 колонок с городами и все они разной высоты. А разве flex-box может себя вести как плиткой как column-count и масонри?

[Лобстер]

Ankhena W: w3bits.com/css-masonry