Групповые элементы внутри гибкого контейнера ⇐ CSS

[Anonymous]

У меня есть несколько элементов, каждый из которых нужно отобразить в сетке. В настоящее время я использую flex для достижения этой цели. Каждый элемент имеет квадратное соотношение сторон и одинаковый размер. Эти элементы сгруппированы. Примером может служить этот набор данных:

Код: Выделить всё

[
{
color: "#FF0000",
items: [
"Item 1",
"Item 2",
"Item 3"
]
},
{
color: "#00FF00",
items: [
"Item 4",
"Item 5",
"Item 6"
]
}
]

Предположим, здесь в квадратном контейнере отображается только текст. При их отображении они также группируются по категориям. Итак, каждый элемент из категории 1, затем 2 и т. д.
Теперь я хочу нарисовать рамку вокруг каждой категории, а также установить фон для каждой категории, используя предоставленный цвет. Само по себе это легко сделать, но элементы находятся в гибком контейнере с включенной функцией переноса. Проблема заключается в том, что я заранее не знаю, сколько элементов находится в строке, и поэтому не могу создать несколько родительских элементов div для каждой строки, когда знаю, что будет перенос. Любые предложения о том, как я мог бы добиться этого эффекта.
Код, который я использую для отображения элементов прямо сейчас, без цвета (я использую React и попутный ветер для CSS, Технология компонент — это то, что отображает каждый элемент):

Код: Выделить всё

{technologies
.map(category => {
return (
category.items.map(technology => {
return (

)
})
)
})}

Редактировать: я нарисовал в Paint, как это должно выглядеть, и как оно выглядит сейчас:
Сейчас:


Как мне это нужно:


На этих изображениях число в квадрате обозначает категорию. Каждая категория окрашена в свой цвет. Я также не прошу точного копирования и вставки кода, я просто не вижу логики того, как я могу это отобразить, не зная количества элементов в строке.


Подробнее здесь: https://stackoverflow.com/questions/786 ... -container