Как сверстать список под этот макет?

Question

[kaleon]

Песочница (смотреть в viewport 768px):
codesandbox.io/s/create-react-app-22jzx
или
https://codesandbox.io/s/create-react-app-zi92t
Необходимо мапнутые массивы с "квадратами" (это в перспективе будут изображения, примерно 20х20 +- 2px) и текстом структурировать на странице под макет

Например, когда в макете бывает 3 элемента в строке, вместо четырех и надо как-то указать брейк. Ко всему прочему, у меня колонки так сказать inline, а я не понимаю, надо сделать хаотично.
Как это реализовать без костыльного присваивания width по ключу каждому элементу?

Comments

[Рома Зварич]

Из описания толком непонятно, как в итоге должно выглядеть, так как на изображении, которое Вы называете макетом, нет даже тех квадратов 20x20.

Предлагаю попробовать еще раз объяснить, как должно быть.

[kaleon]

Рома Зварич, Извиняюсь, обновил макет

Answer 1

[VegasChickiChicki]

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

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

p.s. могут быть ошибки, без автоподстановки пока не могу >.<

Если конечно я правильно понял в чем проблема...

Comments

[kaleon]

Это навело на верные мысли и я немного подредачил код, но пока не решил ещё задачу в том плане, что позиционка слишком расходится
https://codesandbox.io/s/create-react-app-3iow1

[kaleon]

Как сделать так, чтоб текст после пробела переносился?
Из-за FlexWrap он идёт в строку, и не переносится пробелами, как в макете https://codesandbox.io/s/create-react-app-3iow1

[VegasChickiChicki]

kaleon, Обернуть текст + изображение в контейнер, задать этому контейнеру максимальную ширину, далеко не идеальный вариант, но рабочий. Ставить после каждого слова
, тоже не самый лучший вариант, но тоже рабочий.