How to create rows using material-ui grid

Question

I am using material-ui grid for responsive stuff. But i am not able to create nested rows for my view. I need first 1 row after that i am dividing into 3 columns with 3,3,6.For first column i need to divide into two rows which should match the height of 2 and 3 columns.I don't know how to separate column into two rows.

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> 

Answer 1

You should put item xs.={...} only on the items but not on the contsiner s.

Nexts, you propably want to define sm={...} (and the other screen sizes) on the items as well. A xs with 12 will always take the full row.

Have a look on the documentation for examples https://material-ui.com/components/grid/

Answer 2

I think this should be enough for your case:

<Grid container>
  <Grid container item xs={3}>
    <Grid item xs={12} style={{border: "black solid 1px"}}>
      column 1, row 1
    </Grid>
    <Grid item xs={12} style={{border: "black solid 1px"}}>
      column 1, row 1
    </Grid>
  </Grid>
  <Grid item xs={3} style={{border: "black solid 1px"}}>
    column 2
  </Grid>
  <Grid item xs={6} style={{border: "black solid 1px"}}>
    column 3
  </Grid>
</Grid>