How to properly arrange these elements?

Question

css

I could just absolutely position everything and put them in their places, but there it would be crap with an adaptive. I tried to do it on svg, I don't know how to change the appearance of the active 'tab'.
Has anyone done something similar? Any ideas for implementation?

Answer 1

Don't be smart. Saw on absolutes. Set sizes and positions as a percentage. Plus a couple of media queries to redistribute blocks on smaller screens.
And generally it is possible to implement also a normal flow, practically without positioning. Take a closer look - the blocks go in the usual order if they are floated. They just need to fix the height so that they do not bump into each other:
The first five floats should be located in their places. The sixth will not fit into the remaining space and will jump to the third line. You don’t need to float the last one, but fix the width and center it. Due to the fixed height, the space occupied by the third block will be the same as everyone else, and the content will come out and be as it should. As well as the seventh.
For adaptability, it's better not to fix the height in pixels, but to make it responsive to the block width (using the standard method through the bottom padding)
That's all.
A simple example to get started:

Answer 2

You can also use CSS Grid to position elements.
Something like this:

Answer 3

masonjs.com
masonry.desandro.com callmecavs.com/bricks.js Just
needs to
be set up correctly.