Material UI 如何设置网格元素垂直跨3行？

Question

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

我尝试过嵌套网格，但右侧的网格元素不会跨越垂直空间。我尝试过align-items =“stretch”。

下面是屏幕截图和我的代码。感谢您的任何建议！

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

只需添加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>
  );
}