Необходимо уже существующую верстку выстроить в столбцы. Подходят и гриды, флексы в плане поддержки браузерами проекта.
Для примера приведу 2 способа решения, то что нашел на просторах:
1 способ гриды
2 способ флексы
В первом случае нужно количество строк вычислять при помощи js, во втором высоту родителя, так еще и колонки не ровные во втором случае. Должно быть так что на десктопе это 5 колонок, на планшетах 3, ну и мобилка это 1.
Ну и соответственно вопрос. Можно ли как-то законно без js выстроить такое вообще, чистым css?
/* 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 кода и результат в обоих случаях визуально одинаковый, суть вашей проблемы не улавливается.
Ankhena, не совсем понял чем этот пример не подходит. Однотипная ситуация. Создать несколько колонок в уже имеющейся верстке, где количества элементов неизвестное количество (ну если не прибегая к js, то неизвестно).
Простой
Средний