how to place cards horizontally in material ui with same height

Viewed 209

I am new to material ui . I want all these cards in the image to be same height but can't manage to do so :/ How Can I make cards of same height? I have tried adding the height 100% to card component still no luck This is my codeenter image description here

News.js


  const useStyles = makeStyles({
    fullHeightCard: {
        height: "100%",
    },
  });
const News = (props) => {
  const { title, description,urlToImage } = props.articles;
  const classes = useStyles();
  return (
  <Container fixed>
    <Card className={classes.fullHeightCard} >
      <CardActionArea>
      <CardMedia
          component="img"
          alt="Contemplative Reptile"
          height="100%"
          image={urlToImage}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
    </Container>
    
  );
};

export default News;
2 Answers

You can add this prop to your class:

fullHeightCard: {
    minHeight: "100px",
},

I don't think it is possible because your card content is different or you have to set the height same as the longest card to all other cards

Related