Is it possible to build such a tape of blocks on flexes?

Question

css

The bottom line is that the server can give any sequence of tape blocks, as in the picture. Inside these blocks will be text. The number of blocks can be many, so scrolling will be provided. How can you automate the arrangement of blocks in the feed so that they are always located optimally and beautifully, as in the picture?
Tried using Masonry but it can't properly position block #4 under blocks #3 and #2. Can this be done on flexbox? I tried to do it, but it doesn't work without wrappers. There was an idea to wrap blocks such as 2 and 3 directly on the server in a separate .wrapper. Moreover, specify flex-flow: column wrap for the main container , and flex-flow: row wrap for .wrapper. In general, in other words, on the server to calculate the "conditions" which blocks to wrap in an additional block.
But how to do it right? Is it even possible to simply give the client a regular JSON, where the height / width will be described for each rectangle, and some code will parse it and put down CSS properties to the blocks and insert them into the DOM, and the browser itself, for example, will build a sequence on flex, as in the picture ?

Answer 1

Lay out on tables.
Use the colspan and rowspan attributes to make cells span 2 spaces in length and/or height
here is a basic example:
https://www.w3schools.com/tags/tryit.asp?filename=...

Answer 2

Maybe so?
ISOTOPE

Answer 3

yes, give json and let the client script parse the data and generate elements