Same Height Cards in Material UI

Question

Trying to have 3 horizontal cards but with the same height and to be responsive.

Like

Card A | Card B | Card C

Answer 1

You can use the Grid component to achieve this:

<Grid container alignItems="stretch">

  <Grid item component={Card} xs>
    <CardContent>
       // Card A content
    </CardContent>
    <CardActions>
      // Card A actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>
</Grid>

alignItems="stretch" (Which you don't actually need to specify, since stretch is the default) will have the effect of stretching the height of each item when the flex direction is row (which is also the default direction). You can see this answer for more details: https://stackoverflow.com/a/46956430/253693

The xs attribute on each Grid item takes advantage of auto-layout, instructing each card to equally share the available width.

There are a few more clean-up items you could address, namely by using the withStyles HOC to apply a class to each Card component that fixes spacing and ensure that the CardActions remain at the bottom of the card, regardless of the height of the CardContent:

const styles = {
  card: {
    // Provide some spacing between cards
    margin: 16,

    // Use flex layout with column direction for components in the card
    // (CardContent and CardActions)
    display: "flex",
    flexDirection: "column",

    // Justify the content so that CardContent will always be at the top of the card,
    // and CardActions will be at the bottom
    justifyContent: "space-between"
  }
};

You would then apply these styles to each card like so:

<Grid item component={Card} xs className={classes.card}>

Here's a working example that brings everything together: https://codesandbox.io/embed/r9y95vr5n