Как можно выровнять столбцы с блоками по высоте?

Question

[Дмитрий]

Доброго времени суток.
Подскажите как то можно (например с помощью jquery) выровнять высоту трех столбцов с блоками, чтобы они примерно были одинаковыми по высоте. Есть каталог с разными товарами для разного города, где то товаров в рубрике может не быть, рубрика скрывается, следовательно мы не знаем высоту столбцов. Пример ниже.

Сейчас сделано так:

<div class="column">
<div class="cat1"></div>
<div class="cat2"></div>
<div class="cat3"></div>
</div>
<div class="column">
<div class="cat4"></div>
<div class="cat5"></div>
<div class="cat6"></div>
<div class="cat7"></div>
</div>
<div class="column">
<div class="cat8"></div>
<div class="cat9"></div>
<div class="cat10"></div>
</div>

Думал как вариант еще сделать через один div flex column и сделать для него max-height:900px, но тогда может получится еще хуже. Может есть еще какие то варианты? Я например могу на php посчитать количество категорий и подкатегорий и передать их в jquery - но что это даст...

Answer 1

[Арсений Матыцин]

Присмотрись к https://masonry.desandro.com/. Если сам тебе он не поможет, так хоть сырцы можешь глянуть и под себя логику загнать.

PS: есть лайфхак с columns, они для другого, поэтому, чтобы их применить придется изрядно повозиться и это скорее костыль.

Comments

[Дмитрий]

Вроде то что нужно, сейчас буду пробовать, спасибо!

[Арсений Матыцин]

Дмитрий, учти, что по умолчанию он выстраивает блоки не самым очевидным способом + слева направо. Есть ли в конфиге возможность переопределить, хз, никогда не смотрел доку на предмет этой информации.

[Дмитрий]

Ок, спасибо, слева направо тоже не плохой вариант.

[Froggyweb]

css columns

[Дмитрий]

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

[Дмитрий]

Froggyweb, Какое свойство в css запретит переноса строки в column-count? нашел ответ! Для дочерних блоков делаем:

overflow: hidden; /* Fix for firefox and IE 10-11 */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

И готово!
Всем спасибо!!!!!

Answer 2

[n1ksON]

Считаете количество категорий в каждой колонке. Затем в колонку с наименьшим количеством категорий отправляете блок из колонки с наибольшим количество категорий (либо несколько блоков, чтобы уравнять количество категорий в каждой колонке).

Comments

[Дмитрий]

В принципе можно, делаю три скрытых поле, в них записываю количество категорий в столбце, потом jquery из них инфу забирает и уже с ней там работаю, но логика там тоже не простая будет... Ну буду думать...