I need to make blocks in three columns of type enter image description here

Blocks can stretch in width, but each has a fixed height. The problem begins when I try to make them adaptive. To achieve at least an exemplary behavior, I used flex, bootstrap, I tried it myself, but in the end I stopped at bootstrap. If the screen is too wide, then there should be three columns, if normal, then two, and if small, then one. With the first and last option, everything is extremely simple. But what to do with the second?

I will give an example of what I have:

In three columns: enter image description here

In one: enter image description here

But in two does not come out, there is an empty space in the red block. enter image description here

I understand that this is because of the height of the first line and it’s impossible to do something about it, but perhaps there is some other approach to writing this in this situation.

I have an idea to leave everything as it is, only after there are two columns, to hide the third column and use js to distribute its elements among the existing two. Only for some reason it seems to me that this is a huge crutch and there should be an option that I missed.

Any ideas?

    1 answer 1

    Https://github.com/desandro/masonry and others like it are suitable for solving such issues.

    • one
      The published message does not contain a solution to the problem. Please try to write more detailed answers. - mymedia
    • Hmm, an interesting solution. And what about performance say. I looked at a lot of materials, by this method, in general, you can get it to work with the bootstrap mesh. But will it be better than if I myself calculate and scatter the elements in columns? - Tima