How to make such an adaptive menu with distribution?

Question

css

Hello!
For several hours now I can’t figure out how to implement such an idea:

Namely, how to make it so that when at least one item does not fit in the existing rows, a new row is added and all items are distributed evenly horizontally across all rows?
Maybe flex is possible?
Similar in behavior, but not suitable for me, what I managed to find (suddenly someone will come in handy) - dabblet.com/gist/2030070
See what I managed to do
UPD:
Came to this option on js

Answer 1

Media screen CSS requests are required. Otherwise it is impossible. Look... Doesn't suit him...