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:
- Not using the spacing feature and implementing it in user space spacing={0} (default).
- 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>
- Adding overflow-x: hidden; to the parent.