Как сделать верстку блоков разной высоты в 2 колонки без отступов по вертикали?

Question

[pashjka]

Всем привет!
Подскажите, как можно сделать такую верстку дизайна блоков?
Контейнер имеет два блока, каждый блок имеет 50% ширины контейнера и авто высоту, которая получается от растягивания блока контентом, который находится внутри. На выходе хочу получить такую картинку, где каждый блок идет под предыдущим. Очередность div (блоков) указал для примера, при необходимости можно ее изменить.



кажется, что тут нужен grid, но не очень понимаю, как это сделать.

Answer 1

[Rsa97]

Если устроит, что сначала блоки в первой колонке, потом во второй, то это банальный css column

Comments

[pashjka]

вполне подходит, спасибо! Скажите, у вас есть решение, где нумерация блоков была бы как на рисунке?

Answer 2

[Тимофей]

Это masonry плитка, в документации bootstrap есть ссылка на библиотеку https://masonry.desandro.com.
Возможно вам поможет, может есть и другие. Как пример https://getbootstrap.com/docs/5.2/examples/masonry/
Не в коем случае не призываю использовать bootstrap.

Comments

[pashjka]

с Masonry знаком, спасибо
без него никак нельзя решить? Только css или с небольшим js кодом, без подключения сторонних библиотек?

[archelon]

pashjka, можно найти более легкие альтернативы masonry
например https://github.com/attila/savvior