Creating responsive flexbox grid with equal items [closed]

I have a problem with matching all my requirements regarding boxes in flexbox. Assume I have 3 breakpoints.

My requirements:

1. On first breakpoint, boxes should be in one column, on second breakpoint in two columns, in third - three columns
2. All items should always have equal width
3. All rows should have equal amount of boxes (box must not ocupy two or three columns)
4. Gap should be 20px

I tried with flex-basis, calcs etc but I am not able to match all 3 requirements at once.