ReactJS - Using material UI Grid spacing

user_12914612 0
Viewed 29196

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

material-ui reactjs css javascript
4 Answers

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.
user_9549400 
<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.

user_38584220

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}>
     ...
Admin1

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, e.g. spacing={2} creates a 16px wide gap.

user_16117140
Related