In material ui version 5 Grid component not stretching

Viewed 61
1 Answers

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>
           );
         }
Related