Currently, I am working on building a web page using the React Material UI Grid component. However, I'm encountering an issue with aligning items across nested grids. The current view looks like this: https://i.sstatic.net/bUreX.png
What I want is for the item on the right half side to stretch and align with the left half side at the bottom, creating an ideal layout like this: https://i.sstatic.net/SpevP.png
Here is the relevant code snippet:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
export default function NestedGrid() {
const classes = useStyles();
function FormRow3() {
return (
<React.Fragment>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</React.Fragment>
);
}
function FormRow2() {
return (
<React.Fragment>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</React.Fragment>
);
}
return (
<div >
<Grid container spacing={1}>
<Grid container item xs={6} spacing={3}>
<FormRow3 />
<FormRow3 />
</Grid>
<Grid container item xs={6} spacing={3}>
<FormRow2 />
</Grid>
</Grid>
</div>
);
}
For further reference, I have provided a sandbox link here: https://codesandbox.io/s/material-demo-forked-xunx7
If anyone can provide assistance, it would be greatly appreciated.
Edit: With the use of @nipuna777's solution (flex=1), I was able to align the items in the grid. However, in more complex scenarios like this one: https://i.sstatic.net/zsSNE.png
The top, bottom, and right parts may not align perfectly. How can I ensure that all these boundaries align perfectly? Any guidance on this matter would be helpful.
Here is the code for the aforementioned scenario: https://codesandbox.io/s/material-demo-forked-imrrh?file=/demo.js