I have some items that each need to be displayed in a grid. I am currently using flex to achieve this. Every item has a square aspect ratio and is the same size. These items are grouped. An example would be this dataset:
[ { color: "#FF0000", items: ["Item 1","Item 2","Item 3" ] }, { color: "#00FF00", items: ["Item 4","Item 5","Item 6" ] }]Assume just the text is being displayed in a square container here. When displaying these, they are grouped by category too. So every item from category 1, then 2, etc.
I now want to draw a border around every category, as well as set the background for every category using the color provided. This is easy to do in itself, but the items are in a flex container which has wrap enabled. The problem lies in that I don't know beforehand how many items are in a row and so I can't create multiple parent divs for each row when I know there will be a wrap. Any suggestion on how I could achieve this effect.
Code I'm using to display the items right now, without the color (I'm using React, and tailwind for css, the Technology component is what renders every item):
<div className="flex flex-row flex-wrap shadow-inner gap-2"> {technologies .map(category => { return ( category.items.map(technology => { return (<Technology name={technology.name} iconUrl={technology.iconUrl} /> ) }) ) })}</div>