ReactJS – Using material UI Grid spacing

I’m using Material UI grid and as soon as I put spacing higher than 0 ,my Grid doesnt fit the screen and bottom slider is visible and i can move the page horizontally a bit.

Simplified code i’m using :

<Grid container
  justify="space-around"
  spacing={4}>
  <Grid item xs={6} >
    <Paper>a</Paper>
  </Grid>

  <Grid item xs={6} >
    <Paper>b</Paper>
  </Grid>


</Grid>

With spacing = 0 , the grid fits completely and bottom slider is not there. How do I still keep spaces between grid items making sure the grid doesnt increase the width of the app . What am I doing wrong?

Link to codesandbox with same issue replicated : https://codesandbox.io/s/magical-sammet-y0297?fontsize=14&hidenavigation=1&theme=dark

Thanks

Answer

Here is the official answer to this question courtesy of the docs:

Negative margin

There is one limitation with the negative margin we use to implement the spacing between items. A horizontal scroll will appear if a negative margin goes beyond the . There are 3 available workarounds:

  1. Not using the spacing feature and implementing it in user space spacing={0} (default).
  2. Applying padding to the parent with at least half the spacing value applied to the child:
<body>
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
     //...
   </Grid>
 </div>
</body>
  1. Adding overflow-x: hidden; to the parent.

Leave a Reply

Your email address will not be published. Required fields are marked *