Sometimes, we want to fix the issue where Grid in Material UI causes horizontal scroll in React.

In this article, we’ll look at how to fix the issue where Grid in Material UI causes horizontal scroll in React.

How to fix the issue where Grid in Material UI causes horizontal scroll in React?

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={0}>
        <Typography variant="h3">hello world</Typography>
      </Grid>
    </ThemeProvider>
  );
}

to add the container prop to Grid to make it render as a container element.

Then we set the spacing prop to 0 to remove all spacing from the container element.

Now the container should stay in the page.

Conclusion

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.