Как выстроить список в столбцы?

Question

[Алекс]

Необходимо уже существующую верстку выстроить в столбцы. Подходят и гриды, флексы в плане поддержки браузерами проекта.
Для примера приведу 2 способа решения, то что нашел на просторах:
1 способ гриды


2 способ флексы


В первом случае нужно количество строк вычислять при помощи js, во втором высоту родителя, так еще и колонки не ровные во втором случае. Должно быть так что на десктопе это 5 колонок, на планшетах 3, ну и мобилка это 1.

Ну и соответственно вопрос. Можно ли как-то законно без js выстроить такое вообще, чистым css?

Answer 1

[Дмитрий Алп]

Ваши примеры не работают .

Comments

[Алекс]

Извиняюсь, затер фидлы свои и эти оказались случайно в списке, залил новые)

Answer 2

[Станислав Тамат]

По поводу колонок на разных девайсах

/* Small devices */
@media (max-width: 768px) {
/* CSS here */
}

/* Small and Medium devices */
@media (max-width: 992px) {
/* CSS here */
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 992px) {
/* CSS here */
}

/* Large and Extra large devices */
@media (min-width: 992px) {
/* CSS here */
}

А на счет js то что вы пишете непонятно. У вас ни в одном примере нет js кода и результат в обоих случаях визуально одинаковый, суть вашей проблемы не улавливается.

Comments

[Ankhena]

В первой версии кода у спрашивающего было по 17 пунктов, тогда было понятнее в чем проблема.

[Алекс]

Ankhena, не совсем понял чем этот пример не подходит. Однотипная ситуация. Создать несколько колонок в уже имеющейся верстке, где количества элементов неизвестное количество (ну если не прибегая к js, то неизвестно).

[Ankhena]

Алекс, для 19 всё правильно выглядит и не ясно в чем проблема