MUI Grid spacing causes grid to have padding left

user_19774872 0
Viewed 34

I am trying to create a grid with a bunch of elements but there seems to be a problem when I add spacing to the elements. Here's a picture with spacing={0} on the Grid container: Grid container with no spacing

Here's the result when adding spacing : Grid container with spacing = 3

I am trying to keep the grid the same width as the buttons above (see picture). I tried different solutions but it does not seem to work on my side. Here is my code :

 return (
<Grid
  sx={{
    width: "100vw",
    overflowX: "hidden",
    padding: { xs: "20px", md: "50px" },
    margin: 0,
    background: "hsl(0, 0%, 98%)",
  }}
  container
>
  <Grid
    sx={{ width: "100%", marginBottom: "30px" }}
    item
    display="flex"
    flexWrap={"wrap"}
    justifyContent={"space-between"}
    gap={"25px"}
  >
    <SearchInput />
    <FilterMenu />
  </Grid>

  <Grid container spacing={3} xs={12}>
    {countries?.map((country, idx) => (
      <Grid item xs={3}>
        <CountryCard key={idx} country={country} />
      </Grid>
    ))}
  </Grid>
</Grid>
material-ui reactjs css
1 Answers

The easiest and correct way in my opinion based on your images, would be to separate your Grid containers. One Grid containing the Search and Filter inputs and another to contain your flags. In this way you can keep a better control of your spacing and use let css customisations in the Grid items. Have a look in this codesandbox where i have left a few comments and let me know it it helps.

user_53764040
Related