I am trying to stretch the Grid component when one of the Card component has extra text.
Please find the sample code here:
https://codesandbox.io/s/mediacard-demo-material-ui-forked-xpme4r?file=/demo.js:283-290
When i change the alignItems to "flex-end" or "center" it works.
But alignItems: "stretch" not working.
Using MUI Version5
Any suggestions would be helpful.
The Problem is Solved I added the heights to the card and made it responsive It Might be helpful to you
import React from "react";
import { Grid, Card } from "@mui/material";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles((theme) => ({
stretch: {
height: "100%"
}
}));
export default function MediaCard() {
const classes = useStyles();
return (
<Grid container spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card A</CardContent>
<CardActions>
Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions
</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent> Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
</Grid>
);
}