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
  <Grid item xs={6} >

  <Grid item xs={6} >


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 :



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:
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
  1. Adding overflow-x: hidden; to the parent.

Leave a Reply

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