My web page should be comprised of a set of cards. The cards should have fixed width, but varying height depending on the content. I want the cards to be layout vertically and horizontally, something like this:

Now, the heights of the cards vary depending on the size of the content. Cards come and go, depending on user actions. My first thought was using CSS grids, but grids have strict column and row lengths, so it’s not an optimal solution for me.

Basically, I need something to place the cards on the page so that for example if my grid has 2 columns, and one card has height of 200px, and 2 cards have height of 100px, so I want the 200px card on the left column, and the 2 100px cards to be on the right column, one on top of the other.

Is there a way to achieve this?