Material UI How to set grid element to span 3 rows vertically?

Question

This seems like a basic question, but there is no example of how to accomplish this in the official documentation of Material UI.

I have tried nesting the grid, but the grid element on the right will not span the vertical space. I have tried align-items="stretch".

A screenshot and my code are below. Thanks for any suggestions!

return (

<Container>

  <Box>
    <Typography>Test</Typography>
  </Box>

  <Grid container spacing={3} direction="row" justify="center" alignItems="stretch">
    <Grid item xs={12}>
      <Paper className={classes.paper}>xs=12</Paper>
    </Grid>

    <Grid item xs={6} spacing={3}>
      <Grid>
        <Card className={classes.root} variant="outlined">
          <CardContent>
          <Typography className={classes.title} color="textSecondary" gutterBottom>
            Customer Profile
          </Typography>
          <Typography variant="h5" component="h2">
            Sarah Doria
          </Typography>
          <Typography className={classes.pos} color="textSecondary">
            Position
          </Typography>
          <Typography variant="body2" component="p">
            Company
            <br />
            {'"a benevolent smile"'}
          </Typography>
          </CardContent>
          <CardActions>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
    </Grid>

    <Grid>
      <Card className={classes.root} variant="outlined">
        <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          Preferences
        </Typography>
        <Typography variant="h5" component="h2">
          Color
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          Size
        </Typography>
        <Typography variant="body2" component="p">
          Style
          <br />
          {'"a benevolent smile"'}
        </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>

    <Grid>
      <Card className={classes.root} variant="outlined">
       <CardContent>
       <Typography className={classes.title} color="textSecondary" gutterBottom>
          Lifestyle
        </Typography>
        <Typography variant="h5" component="h2">
          Destination:
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          Climate:
        </Typography>
        <Typography variant="body2" component="p">
          Beverages:
        <br />
        {'"a benevolent smile"'}
      </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
      </Card>
      </Grid>
    </Grid>
  </Grid>

  <Grid item xs={6}>
    <Grid>
      <Card className={classes.root} variant="outlined">
        <CardContent>
          <Typography className={classes.title} color="textSecondary" gutterBottom>
            Customer Cart
          </Typography>
          <Typography variant="h5" component="h2">
            Sarah Doria
          </Typography>
          <Typography className={classes.pos} color="textSecondary">
            Position
          </Typography>
          <Typography variant="body2" component="p">
            Company
            <br />
            {'"a benevolent smile"'}
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>
      </Grid>
  </Grid>
  </Grid>

</Container>
);
}

Answer 1

Simply add height 100% on Card and Grid

<Grid style={{ height: "100%" }}>

<Card style={{ height: "100%" }}>

import React from "react";
import "./styles.css";
import {
  Grid,
  Typography,
  Container,
  Box,
  Paper,
  Card,
  CardContent,
  CardActions,
  Button
} from "@material-ui/core";

const YourCard = () => {
  const classes = {};
  return (
    <Card
      className={classes.root}
      variant="outlined"
      style={{ height: "100%" }}
    >
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Customer Profile
        </Typography>
        <Typography variant="h5" component="h2">
          Sarah Doria
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          Position
        </Typography>
        <Typography variant="body2" component="p">
          Company
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
};

export default function App() {
  const classes = {};
  return (
    <Container>
      <Box>
        <Typography>Test</Typography>
      </Box>
      <Grid
        container
        spacing={3}
        direction="row"
        justify="center"
        alignItems="stretch"
      >
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <YourCard />
            </Grid>
            <Grid item xs={12}>
              <YourCard />
            </Grid>
            <Grid item xs={12}>
              <YourCard />
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={6}>
          <Grid style={{ height: "100%" }}>
            <YourCard />
          </Grid>
        </Grid>
      </Grid>
    </Container>
  );
}