How to make a list for this layout?

Question

Flexbox

Sandbox (view in viewport 768px):
codesandbox.io/s/create-react-app-22jzx
or
https://codesandbox.io/s/create-react-app-zi92t
Requires mapped arrays with "squares" (this is in perspective there will be images, approximately 20x20 + - 2px) and structure the text on the page under the layout

. For example, when the layout has 3 elements per line, instead of four, you need to somehow specify a break. In addition, I have inline columns, so to speak, but I don’t understand, I need to do it randomly .
How to implement this without crutch assignment of width by key to each element?

Answer 1

display: flex;
justify-content: flex-start;
align-items: flex-start;

//именно это свойство сделает перенос на новую строчку, если места элементам не хватает
flex-wrap: wrap
//именно это свойство сделает перенос на новую строчку, если места элементам не хватает

ps there may be errors, I can’t do it without auto-substitution yet>.<
If, of course, I correctly understood what the problem is ...