How can I align columns with blocks in height?

Question

css

Good day.
Tell me how it is possible (for example, using jquery) to align the height of three columns with blocks so that they are approximately the same in height. There is a catalog with different products for a different city, where there may be no products in the rubric, the rubric is hidden, therefore we do not know the height of the columns. An example is below.

Now done like this:

<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>

I thought as an option to make a flex column through one div and make max-height: 900px for it, but then it might turn out even worse. Maybe there are some other options? For example, I can count the number of categories and subcategories in php and pass them to jquery - but what will it give ...

Answer 1

Take a look at https://masonry.desandro.com/. If he himself does not help you, then at least you can look at the raw ones and drive the logic under yourself.
PS: there is a life hack with columns , they are for something else, therefore, in order to apply them, you will have to tinker a lot and this is more of a crutch.

Answer 2

Count the number of categories in each column. Then, in the column with the least number of categories, send the block from the column with the largest number of categories (or several blocks to equalize the number of categories in each column).