How to take the free space under the block by the child block?

Question

css

Imagine a standard situation: there is a container inside which there are items with some information, let's say two in a row. Items in the first row have different heights, say the first one is smaller.
Question: is it possible to make the item on the next line occupy the free space of the first line (where one of the blocks is below)?
I am attaching a render.

At the same time, it is necessary that these are exactly rows, and not two columns standing side by side or a column with a limited height on flexes. You can’t use columns / columns, because on the adaptive the order of the items will be visually incorrect.
I tried both on floats and on inline blocks, but everywhere the items fall under the highest block in the previous row. I heard that this can be implemented on grids, with which I am still poorly familiar - it didn’t work out in rows either.

Answer 1

What you want is called Masonry Grid. At the moment, this is normally impossible to do with pure CSS.
Inline-block or column-count are semi-solutions with their drawbacks. You can't do it on grid either. These will all be pseudo-implementations of Masonry with restrictions on the height of individual blocks or with an incomprehensible order of elements, grid height restrictions, etc.
There are JS plugins for this, the most popular of which is https://masonry.desandro.com/ . Setting up this plugin takes a minute. He has everything, including adaptability.

Answer 2

flexbox

Answer 3

Try to look at properties of Grid; This design should help:

elem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1em;
}

This solution will be adaptive for all screens.