How cart-flexbox could look good in filter array of object?

I filter and map by array of object and my view is different in some cases. I want to all possible layout look cool, but in two item look good, in 3 item third took only 50% possible space, in 4th - card actually wrap in two rows, but took only 50% possible space, in 5th item look cool. Cart take their space and last item take all.

            <Container style={{display: "flex", flexDirection: "row", paddingTop: "20px",  flexWrap: "wrap"}}>
{data.map((z=> (
 <Col lg="6" style={{width: "100%", display: "flex", flexDirection: "column", borderStyle: "groove",  flex: "40%",  marginLeft: "10px", marginRight: "10px", marginTop: "10px",  marginBottom: "10px"}} key={z.id} >
 <h3> {z.name}</h3>
 <span> {z.price}</span>
</Col>
))}
</Container>