<Grid> in material ui causes horizontal scroll- React

This is caused by spacing. Sometimes we can still use spacing by limiting the Grid under a Container.

<Container maxWidth={false}>
  <Grid container spacing={6}>
    Omit
  </Grid>
</Container>

I had the same issue. I figured out a couple solutions but neither feel very elegant:

Disable spacing
Unfortunately this removes all padding from child grid items within the container:

<Grid container
  spacing={0}>

Manually fix the CSS
This is what I ended up doing:

<Grid container
  style={{
    margin: 0,
    width: '100%',
  }}>

Copied the easy solution from comment:

added xs={12} to <Grid container>

<Grid container spacing={3} xs={12}>

credit to https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645

Related