Как сделать сетку, чтобы блоки заполняли пробелы?

Question

[Роман Тузов]

Сейчас имеются блоки на флексах. Как сделать, чтобы блок снизу заполнял пустую область, которая имеется выше него?

Comments

[Rustam Bainazarov]

Этого на CSS не сделать нормально. Используйте любой Masonry-плагин.

Answer 1

[Антон Литвиненко]

То, что вы хотите, флексы не умеют. У флексов ряд будет всегда по высоте самого высокого блока, блоки из следующего ряда туда не попадут.
Смотрите в сторону плагинов masonry, isotope

Answer 2

[DarkRou]

есть вариант поменять flex-direction на column. Но как это будет точно работать, не проверял

Comments

[Роман Тузов]

Ну логично, что они станут в колонну. Такое не подходит

[DarkRou]

Hutson, Так можно ограничить высоту родительского блока, и добавить flex-wrap: wrap. В таком случае, вертикальных пробелов не должно быть

[Роман Тузов]

DarkRou, Так зачем её ограничивать, там ведь будут дальше добавляться новые блоки. Родительский блок будет постепенно ведь растягиваться

[DarkRou]

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

[Роман Тузов]

DarkRou, Я хочу более простой ответ. Уверен он есть, я за этим сюда и написал. Не хочу сильно растягивать всё. Может как-то с грид можно это сделать?

[DarkRou]

Hutson, Так-то, грид - сетка. От неё пробелы будут только больше, если блоки ещё и разной ширины будут. Возможно есть какие-то js плагины для реализации такой идеи, но решения чистыми html/css/js я не знаю, не считая того, что я уже написал

[hzzzzl]

Hutson, неа, и флексы и гриды будут выстраиваться в ряд, само по себе без JS ничто не сможет сделать такую сетку

https://masonry.desandro.com/

[DarkRou]

hzzzzl, Вот, как раз плагин. Более адекватного решения не найти