How to make a flat grid with a repeating rhythm using flex-box?

Question

css

Below is an example of a grid. The rhythm of repetitions large and small is just that. How to make an even grid? so that you can see an even indent line in the center. How can this be achieved without wrapping small blocks in a container?

Mesh example

Answer 1

https://jsbin.com/bolilozafu/1/edit?html,css,output