material-ui 水平对齐第一张牌下方的两张牌

Question

如何在 Graph One 下方水平对齐 Graph Two 和 Graph three？

换句话说，我想保留图一卡的原样，但移动图二使其处于同一水平，图三并且它们在图一下方彼此水平对齐

这是我目前所拥有的

import React from "react";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";


const styles = {
  card: {
    minWidth: 275,
    display: "inline-block"
  }
};

const YourCardOne = () => {
  return (
    <Card variant="outlined" style={{ height: "200%" }}>
      <CardContent>
        <Typography color="textSecondary" gutterBottom>
          Graph One
        </Typography>
        <Typography variant="h5" component="h2">
          Sarah Doria
        </Typography>
        <Typography color="textSecondary">Position</Typography>
        <Typography variant="body2" component="p">
          Company
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions></CardActions>
    </Card>
  );
};

const YourCardTwo = () => {
  return (
    <Card variant="outlined" style={{ height: "100%" }}>
      <CardContent>
        <Typography color="textSecondary" gutterBottom>
          Graph Two
        </Typography>
        <Typography variant="h5" component="h2">
          Sarah Doria
        </Typography>
        <Typography color="textSecondary">Position</Typography>
        <Typography variant="body2" component="p">
          Company
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions></CardActions>
    </Card>
  );
};

const YourCardThree = () => {
  return (
    <Card variant="outlined" style={{ height: "100%" }}>
      <CardContent>
        <Typography color="textSecondary" gutterBottom>
          Graph Three
        </Typography>
        <Typography variant="h5" component="h2">
          Sarah Doria
        </Typography>
        <Typography color="textSecondary">Position</Typography>
        <Typography variant="body2" component="p">
          Company
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions></CardActions>
    </Card>
  );
};

export default function GraphBackDrop() {
  return (
    <div>
      <Container>
        <Grid
          container
          spacing={3}
          direction="row"
          justify="center"
          alignItems="stretch"
        >
          <Grid item xs={48}>
            <Grid container spacing={25}>
              <Grid item xs={12}>
                <YourCardOne />
              </Grid>
              <Grid item xs={20} >
                <YourCardTwo />
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={20}>
            <YourCardThree />
          </Grid>

        </Grid>
      </Container>
    </div>
  );
}

Answer 1

您可以将 GraphBackDrop 组件更新为：

export default function GraphBackDrop() {
  return (
     <Container>
        <Grid
          container
          spacing={3}
          justifyContent="center"
          alignItems="stretch"
        >
          <Grid item xs={12}>
            <YourCardOne />
          </Grid>
          <Grid item xs={12} sm={6}>
            <YourCardTwo />
          </Grid>
          <Grid item xs={12} sm={6}>
            <YourCardThree />
          </Grid>
        </Grid>
     </Container>
  );
}

注意： xs, sm, md, lg & xl 被标识为断点.它设置网格项目使用的列数。不能大于容器的总列数（默认为12）。

如果您想了解有关 MUI Grid 组件的更多信息，请参阅此 official documentation。

material-ui 水平对齐第一张牌下方的两张牌

material-ui horizontally align two cards below first card

reactjs

material-ui