How can I lay out elements so that they wrap into an equal number of elements of equal width per row depending on screen width.
If the screen shrinks:
I cannot know beforehand how wide each element will be or set a fixed width.
I've looked into flexbox and grid and I can't figure it out. This is my best attempt with flexbox:
<style> .FlexItem { flex-grow: 1; flex-shrink: 1; flex-basis: 0px; }</style><div style="display : flex; flex-flow: wrap;"><div class="FlexItem" style="background-color : red;"> 11111111111 111111111111</div><div class="FlexItem" style="background-color : blue;"> 22222222222 222222222222</div><div class="FlexItem" style="background-color : green;"> 33333333333 333333333333 3333333333 3333333333</div><div class="FlexItem" style="background-color : yellow;"> 44444444444 444444444444</div><div class="FlexItem" style="background-color : gray;"> 55555555555 555555555555</div><div class="FlexItem" style="background-color : purple;"> 66666666666 6666666666666</div></div>And I get this:
