I am currently working on an application that involves a collection of cards. My tech stack includes React and MUI v5.
One issue I've been facing is with the grid layout, specifically in trying to keep the image size consistent within the grid item. Despite trying various solutions such as using different containers for the image or experimenting with object-fit and background images, I haven't been able to find a satisfactory fix.
I suspect the problem lies in the parent element not having a fixed dimension. Is there a way to maintain dynamic sizing while utilizing MUI Grid?
<Grid container item xs={12} border={1} direction="column">
<Grid item xs={2} border={1}>
TITLE
</Grid>
<Grid item xs={5} border={1}>
<img src="https://mui.com/static/images/cards/paella.jpg" style={{ maxWidth: "100%" }} />
</Grid>
<Grid item xs={3} border={1}>
description
</Grid>
<Grid item xs={2} border={1}>
footer
</Grid>
</Grid>
The display appears properly when it's smaller, you can see it here.
However, the issue arises when the display is larger, resulting in something like this here.