I recently switched my divs to Material UI card components and I'm facing challenges with spacing the cards. In my layout, I have 4 cards within a div and I want them evenly spaced out. Previously, when they were simple divs, achieving this was not an issue.
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>
Beautiful cabin in Tunisian countryside by a river. A peaceful place
surrounded by nature waiting 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%;
}
}https://i.sstatic.net/gLWag.jpg This is how it currently looks. I prefer if the 4 images on the right are evenly spaced out.
I tried using `sx={m:1}` but it pushed everything into a single column. I also attempted `sx={p:8}`, however, it had no effect.