Как бы вы оформили данный блок?

Question

[mumus]

Господа дизайнеры-верстальщики, как бы вы оформили данный блок визуально. Блоков 17, города как есть, вряд ли добавится больше. Не хотелось бы иметь больших дыр между блоками, ну и чтобы все выглядело как-то красиво, симметрично. Но проблема, что их 17... =)
В принципе можно сделать по 6 в ряд, получится 6 6 5. Сюда решил написать, может кто-то более гениальную идею даст?

Answer 1

[campus1]

flex, justify, flex-wrap, блокам ширину +- 20%

Answer 2

[mumus]

Поставил flex-basis:20% и justify-content:flex-start
В целом лаконично получилось, но мущают большие дыры из за того, что где-то больше городов, где-то меньше. Но лучше вряд ли получится, верно? )

Comments

[Егор Живагин]

Вообще, можно выводить только районы, а по клику на район отображать подсписок. Ну, аккордеон сделать то есть. По-крайней мере места будет занимать меньше) Особенно на телефонах

Answer 3

[enigma4689]

Мне кажется Вы их плотно поставили. На мой взгляд лучший вариант сделать 6 6 5, там где 5 выровнять по левому краю

Answer 4

[Павел]

Можно сделать красивее))
Выводить например по 2-3-4 города, а ниже добавлять кнопку Ещё, добавляем js/jquery код спойлера и делаем часть списка спойлером

Answer 5

[vaux]

А пользователь будет глазами весь этот список пробегать в поисках нужного ему города? Не проще на карте всё это обозначить? Непонятна группировка городов по шоссе. Это действительно удобнее, чем просто список городов/поселков, отсортированный по алфавиту? К тому же непонятна логика расположения элементов. Совершенно очевидно, что элементы в таких списках нужно делать в алфавитном порядке, чтобы проще искать было. В идеале можно добавить фильтры по районам/шоссе, если это действительно нужно.

И если вы хотите получить ответ касаемо того, как лучше оформить такие данные с визуальной точки зрения, то не ставьте теги html, css, верстка. К вёрстке ваш вопрос отношения никакого не имеет (но вам тут дали советы только касаемо верстки, а не дизайна). Ставить такие теги целесообразно, когда вы уже определились с дизайном и не знаете, как сверстать уже отрисованный элемент.

Comments

[mumus]

Про сортировку городов в алфавитном порядке - за это спасибо, учту и сделаю. Дело в том, что такие задачи ставят нам СЕОшники, и им лучше знать, насколько я понимаю, этот блок нужен для некоего СПАМа СЕОшного для Яндекса и Гугла, я в эти дебри не лезу. =) Про теги тоже учту, спасибо.

Answer 6

[Саша]

mumus поиграйтесь с мульти-колонками column-count, если не нравиться flex
это даст возможность избавиться от дыр под блоками

Answer 7

[Александр Петров]

Ну я бы сделал блоки, дал им float: left и ширину в процентах в нужно соотношении. Ну и процент для разных строк разный. а там уже div и ul li

Comments

[Negwereth]

2017 на дворе

[Александр Петров]

Negwereth: ну классно, че.

Спасибо за инфу, пригодится.