Групповые элементы внутри гибкого контейнера ⇐ 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 (

)
})
)
})}



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