ReactJS - Using material UI Grid spacing
Question
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
4 answers
solution1
6 ACCPTED 2020-05-14 14:34:55
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.
solution2
4 2020-12-31 20:31:14
You can use {gap:15} as style
<Grid container style={{ gap: 15 }}>
<Grid item xs={12}>
//one element
</Grid>
<Grid item xs={12}>
//other element
</Grid>
</Grid>
or you can use spacing
<Grid container spacing={1}>
<Grid item xs={12}>
...
solution3
0 2020-05-14 13:14:20
<Grid container justify="space-around" spacing={8}>
<Grid item xs >
<Paper>a</Paper>
</Grid>
<Grid item xs >
<Paper>b</Paper>
</Grid>
</Grid>
Assuming that you want to keep the columns of equal width you can keep them dynamic <Grid item xs > rather then assigning a fix width of <Grid item xs={6} > to both, allowing the component to resize its width according to the available space.
solution4
0 2021-04-02 20:03:46
Reduce the spacing dimension. spacing={4} is providing 4*8=32px of space around the Grid items. Consequently, horizontal scroll bar is appearing in your page, as the width of the two contained grids along with the space is more than the width of the sandbox browser window. I checked with spacing={2} which puts a space of 2*8=16px around the grid items; The items have enough space between them and the horizontal scroll bar is not appearing. From the documentation
The responsive grid focuses on consistent spacing widths, rather than column width. Material Design margins and columns follow an 8px square baseline grid. The spacing property is an integer between 0 and 10 inclusive. By default, the spacing between two grid items follows a linear function: output(spacing) = spacing * 8px, eg spacing={2} creates a 16px wide gap.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.