I'm trying to create the following design:
The html looks similar to this
<div className='container'><div className='badge'/><div className='badge'/><div className='badge'/><div className='badge'/><div className='badge'/><div className='badge'/><div className='badge'/><div className='badge'/></div>The badges should be evenly spread accross two rows, so if there are 8 badges in total like in the example every row should contain four badges. However, there can also be less badges in some cases, e.g. if there are six badges each row should contain 3 badges. Additionally the width of the badges needs to be flexible while the margin between items should always stay the same. I tried achieving this with flexbox and with grid as well without success. Is it even possible to achieve something like this with just CSS or would I have to divide the array of items using code and wrap them in two divs?