Javascript 材质UI如何将网格元素设置为垂直跨越3行？

这似乎是一个基本问题，但在MaterialUI的官方文档中没有关于如何实现这一点的示例

我已尝试嵌套网格，但右侧的网格元素不会跨越垂直空间。我尝试过对齐项目=拉伸

下面是截图和我的代码。谢谢你的建议

只需在卡片和网格上添加100%高度

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

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

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