Material UI Grid not working properly with Paper Component for nested Grid

Question

I am using React 16+ and Material UI 4.9.5. I am using nested Grid to divide a row into 2 rows(50% width) and show 2 columns in each row.Attached image shows the output. i want Grid Box 1 and Grid Box 2 to be enclosed in Paper Component. Same i want Grid Box 3 and Grid Box 4 to be enclosed in Paper Component. But when i enclose them in paper component, the layout breaks. Grid box 1 and grid box 2 dont float next to each other but instead stack over one another.

Below is the code.

        <Grid container item  spacing={2}>
          <Grid container item xs={6} spacing={1} >

              <Grid item xs = {6}>
                Grid Box 1
              </Grid>  
              <Grid item xs = {6}>
                Grid Box 2
              </Grid>
          </Grid>
          <Grid container item xs={6} spacing={1} >
              <Grid item xs = {6}>
                Grid Box 3
              </Grid>  
              <Grid item xs = {6}>
                Grid Box 4
              </Grid>
          </Grid>
        </Grid>

This is the image

What i want to do is following where layout breaks:

 <Grid container item  spacing={2}>
  <Grid container item xs={6} spacing={1} >
      <Paper>
        <Grid item xs = {6}>
          Grid Box 1
        </Grid>  
        <Grid item xs = {6}>
          Grid Box 2
        </Grid>
      </Paper>
  </Grid>
  <Grid container item xs={6} spacing={1} >
      <Paper>
        <Grid item xs = {6}>
          Grid Box 3
        </Grid>  
        <Grid item xs = {6}>
          Grid Box 4
        </Grid>
      </Paper>
  </Grid>
</Grid>

kausko kausko · Accepted Answer · 2021-05-10T13:23:28

~~Enclosing "Grid Box 1-4" in Paper components works perfectly as you stated in your problem.~~

The Paper component itself can be used as a Grid, with the component prop. Edited code below:

const useStyles = makeStyles((theme) => ({
  container: {
    height: "100vh"
  },
  paper: {
    textAlign: "center"
  }
}));

function Content() {
  const classes = useStyles();
  return (
    <Grid
      container
      item
      spacing={2}
      alignItems="center"
      justify="space-between"
      className={classes.container}
    >
      <Paper
        className={classes.paper}
        component={Grid}
        container
        item
        xs={6}
        spacing={1}
      >
        <Grid item xs={6}>
          Grid Box 1
        </Grid>
        <Grid item xs={6}>
          Grid Box 2
        </Grid>
      </Paper>
      <Paper
        className={classes.paper}
        component={Grid}
        container
        item
        xs={6}
        spacing={1}
      >
        <Grid item xs={6}>
          Grid Box 3
        </Grid>
        <Grid item xs={6}>
          Grid Box 4
        </Grid>
      </Paper>
    </Grid>
  );
}

Output:

Material UI Grid not working properly with Paper Component for nested Grid

1 Answers