material-ui horizontally align two cards below first card-CodePudding

How can I align Graph Two and Graph three horizontally below Graph One ?

In other words I want to leave Graph One card how it is but move Graph two so it is on the same level and Graph three and they are horizontally aligned with one another below Graph One

This is what I have so far

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

CodePudding user response：

You can update your GraphBackDrop component to this:

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

Note: xs, sm, md, lg & xl are identified as breakpoints. It sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default).

If you want to learn more about MUI Grid component, refer to this official documentation.