Как с помощью css располагать так блоки?

Question

[Кирилл]

Цифрами обозначил порядок в div html, нужно именно в таком порядке

Answer 1

[DavidAngelo]

Вот здесь подборка разных раскладок на флексах. Ссылка на раздел с masonry
https://tobiasahlin.com/blog/common-flexbox-patter...

И подробнее конкретно о мозаике:
https://tobiasahlin.com/blog/masonry-with-css/

Но, опять же с оговоркой: если будет сильная разница в наполнении блоков, то порядок может поехать.

Answer 2

[Vaultboy84]

Masonry, как уже тут писали самый адекватный вариант. Все остальное посредством сиэсэс это костыли. А гриды еще и использовать рано.

Answer 3

[origami1024]

1) flex-direction: column
2) flex-wrap: wrap
3) order 2му и 3му поменять местами

https://codepen.io/origami1024/pen/QWLgKWG

Comments

[Кирилл]

Ну и как это адаптировать под динамическое добавление элементов с произвольной высотой?

[Кирилл]

Элементов может быть бесконечное множество и у каждого своя высота

[origami1024]

Никак :(

[origami1024]

Хотя, с другой стороны, жаваскрипта понадобиться совсем немного. Нужно рассчитывать какой order будет у нового элемента и всем последующим делать +1.

Об остальном позаботиться flex-wrap.

Answer 4

[abi7project]

Перепробовал несколько скриптов для своего проекта. Все забраковал. Для небольшой ленты нормально, для бесконечной не годится. Ресурсы прокрученных вверх блоков не освобождаются и вскоре начинаются дикие тормоза. Пришлось писать самому на js + css. Адовая работа, до сих пор временами баги нахожу. Результат можно посмотреть здесь:
https://www.zombler.com/explore/

Answer 5

[Борис Черепанов]

Добавить к блокам float:left

Comments

[Кирилл]

origami1024, Мне кажется это можно как-то сделать с помощью гридов, но я не знаю как

[Рома Зварич]

Кирилл, можно и с помощью Float и с помощью CSS Grid. Смотрите мой ответ выше