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

Question

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

Answer 1

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.