Search code examples
cssreactjsmaterial-uigrid

Problem with spacing of Grid at Material UI 5

For some reason, MUI5 Grid got the wrong behavior of spacing.

It doesn't provide me a spacing between items and items overlapping containers.

Link to live example: https://codesandbox.io/s/green-worker-z44vds?file=/index.js

Solution

  • The spacing works just fine if you inspect the grid elements using the devtools. The problem is that you have a bgcolor="lightblue" on the <Grid container> which cover the whole grid container and thus you will not see any spacing from the individual grid items.

    Using the following grid you'll be able to see that the grid spacing works fine and it was just a color issue.

    <Grid container height="60px" spacing={2}>
  <Grid item xs={3}>
    <Box bgcolor="lightblue" height="100%" width="100%">
      1
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="lightblue" height="100%" width="100%">
      2
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="lightblue" height="100%" width="100%">
      3
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="lightblue" height="100%" width="100%">
      4
    </Box>
  </Grid>
</Grid>