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 {&nbsp; Grid,&nbsp; Typography,&nbsp; Container,&nbsp; Box,&nbsp; Paper,&nbsp; Card,&nbsp; CardContent,&nbsp; CardActions,&nbsp; Button} from "@material-ui/core";const YourCard = () => {&nbsp; const classes = {};&nbsp; return (&nbsp; &nbsp; <Card&nbsp; &nbsp; &nbsp; className={classes.root}&nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; style={{ height: "100%" }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <CardContent>&nbsp; &nbsp; &nbsp; &nbsp; <Typography&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="textSecondary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gutterBottom&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Customer Profile&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography variant="h5" component="h2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sarah Doria&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography className={classes.pos} color="textSecondary">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Position&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography variant="body2" component="p">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Company&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {'"a benevolent smile"'}&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; </CardContent>&nbsp; &nbsp; &nbsp; <CardActions>&nbsp; &nbsp; &nbsp; &nbsp; <Button size="small">Learn More</Button>&nbsp; &nbsp; &nbsp; </CardActions>&nbsp; &nbsp; </Card>&nbsp; );};export default function App() {&nbsp; const classes = {};&nbsp; return (&nbsp; &nbsp; <Container>&nbsp; &nbsp; &nbsp; <Box>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>Test</Typography>&nbsp; &nbsp; &nbsp; </Box>&nbsp; &nbsp; &nbsp; <Grid&nbsp; &nbsp; &nbsp; &nbsp; container&nbsp; &nbsp; &nbsp; &nbsp; spacing={3}&nbsp; &nbsp; &nbsp; &nbsp; direction="row"&nbsp; &nbsp; &nbsp; &nbsp; justify="center"&nbsp; &nbsp; &nbsp; &nbsp; alignItems="stretch"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={12}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Paper className={classes.paper}>xs=12</Paper>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid container spacing={3}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={12}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <YourCard />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={12}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <YourCard />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={12}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <YourCard />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid style={{ height: "100%" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <YourCard />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </Container>&nbsp; );}