How to make the minimum width and height of the blocks set according to the content using grid or flex?

Question

css

For example, if you display 3 blocks, then they should occupy the entire width of the parent and be the same width and height (the height is the height of the largest), but when the content does not fit in one of them, then the blocks become 2 in width and again take up the entire width of the parent and be the same width and height, and the third is transferred below and its width and height are the same as everyone else. How to do this with Grid or Flex styles?

Answer 1

It's easier to use grid with columns template:
Here is an example: https://codepen.io/kekinlol/pen/PoYGaVZ