I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS:
.GridContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
}
.GridCard {
background-color: bisque;
text-align: center;
border: 1px solid black;
flex: 1 1 0px;
flex-grow: 1;
}<div className='GridContainer'>
{Prods.filter(item => item.Categoria === value).map(item => (
<TabPanel value={item.Categoria} index={item.Categoria}>
<div className='GridCard'>
<h1>{item.Nome}</h1>
</div>
</TabPanel>
))}
</div>however, when displayed on the screen, it appears like this https://i.stack.imgur.com/XvtsK.png