How can I get my Material UI cards to wrap?

Question

I am transforming my divs to Material UI card component. I am having difficulties spacing the cards. I have 4 cards in a div I want them to be spaced evenly. I achieved this when they were just plain divs.

 export default function ({ images }) { return ( <> <div className={cardStyles.container}> <div className={cardStyles.album}> <img className={cardStyles.img} src="yellowCabbin.jpg" /> <Typography className={cardStyles.description}> <h1>Fall Cabbin in Tunisia</h1> <p> Bautiful cabbin in Tunisian country side by a river. Quiet place and abudance of nature ready to be explored by you and your family </p> </Typography> </div> <div className={cardStyles.album2}> {images.map((image) => ( <Card className={cardStyles.card} sx={{ maxWidth: 345, m: -0.2, p: 1 }} > <CardActionArea> <CardMedia component="img" key={image.id} image={image.url} alt={image.id} /> <CardContent> <Typography className={cardStyles.description}> <h1>{image.id}</h1> </Typography> </CardContent> </CardActionArea> </Card> ))} </div> </div> </> ); }

 .container{ display: flex; flex-direction: row; box-sizing: border-box; height: auto; width: fit-content; /* column-gap: 8px; */ padding-top:32px; margin: 0px 120px 0px 120px; /* background-color: brown; */ }.album{ display: block; width: 80%; height: 80%; padding: 8px; object-fit: contain; align-items: center; overflow: hidden; margin: 0px; position: relative; z-index: 1; }.album2{ /* padding: 8px; */ display: flex; flex-wrap: wrap; overflow: hidden; width: 50%; height: auto; position: relative; }.card{ width: 50%; position: relative; height: auto; /* padding: 0px; */ z-index: 2; }.img:hover, .card:hover{ transform: scale(1.3); z-index: 3; transition-duration: 1s; }.description{ position: absolute; bottom:10px; left: 10px; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1),70%); } @media only screen and (max-width:1000px){.container{ display: block; width: 100%; margin: 0px; }.album{ width: 100%; }.album2{ width: 100%; } }

this is how it looks. I want the 4 images on the right to be spaced evenly.

i tried using sx={m:1} it pushes everything into a single column, i also tried sx={p:8} it does nothing

Answer 1

First take care of the height:

.album2{
    /* padding: 8px; */
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    width: 50%;
    height: auto;
    position: relative;
}

It would be better not to use auto but a fixed length as you know the height of each element height is 600px. Add this attribute:

justify-content:space-evenly