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>

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>

  );

}