How to lay out the blocks in this order?

Question

css

Greetings!
Tell me, the whole brain is broken.
There are 9 blocks. They should be in order as in the screenshot.
The height of the blocks in each line should be the same (and depend on the content). Now on the screen the height is the same for all blocks.
On mobile devices (let's say media{max-width:400px} ) all blocks should go one after another, in one column.
As I understand it, it is optimal to use Grid, but I do not have enough experience in them :)

Answer 1

I managed to solve this problem through grids: link to codepen . It lines up in height, the order is observed, on a mobile phone they turn into a regular column.
As for browser support, grids have been in the specification for a long time, the simplest functions are already supported in 87% of browsers.

Answer 2

Saw these 9 blocks and put order
in css . For desktop, set their width to 32%, in mobile - 100%.

Answer 3

https://codepen.io/topicstarter/pen/zWabjN?editors=1100 how to do without height limit don't know