I am utilizing material-ui grid to make my content responsive. However, I am facing challenges in creating nested rows for my layout. My requirement is to have the first row span the entire width and then divide it into 3 columns with widths of 3, 3, and 6 respectively. Within the first column, I need to further break it down into two rows that match the height of the second and third columns. I am unsure of how to split a column into two rows. https://i.sstatic.net/R0AZg.png
Code:
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={3}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>