Same Height Cards in Material UI

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

I think that a easier way:

https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/45#issuecomment-442885173

import React from "react"
import { Card, CardBody, CardFooter } from "components"

import withStyles from "@material-ui/core/styles/withStyles"

const styles = {
fullHeightCard: {
    height: "100%",
    },
}

const Item = (props) => {
    const {classes} = props

    // 1-5 paragraphs to create card height variance
    let paragraphs = 1 + Math.floor(Math.random() * Math.floor(5))

    return (
        <Card className={classes.fullHeightCard}>
            <CardBody>
                {Array(paragraphs).fill().map((_,i) => (
                    <p>{i+1}</p>
                ))}
            </CardBody>
            <CardFooter>
            {'Footer content'}
            </CardFooter>
        </Card>
    )
}

export default withStyles(styles)(Item)

Overriding the rendering component of <Grid item /> with <Card> as suggested in the answers above messes up the spacings (the spacing prop of <Grid container /> stops working). Please, see my explanation below about how you can achieve the vertical alignment of cards without unwanted side effects.

Setting display: 'flex' on <Grid item /> should be enough to align the heights of all <Card /> elements.

However, for additional effect of nicely stretching <CardContent> and <CardActions> vertically, set display: 'flex', justifyContent: 'space-between', flexDirection: 'column' on the <Card /> element as well.

<Grid container alignItems="stretch">
  <Grid item style={{display: 'flex'}}>
    <Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
      // contents of your Card
    <Card/>
  </Grid>
  <Grid item style={{display: 'flex'}}>
    <Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
      // contents of your Card
    <Card/>
  </Grid>
</Grid>