ReactJS – Using material UI Grid spacing Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of ReactJS – Using material UI Grid spacing without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.
We are here to answer your question about ReactJS – Using material UI Grid spacing - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji