'Material UI grid: how only space between elements on the inside, not outside

I ran into this issue where I have several Material UI Cards in a MUI Grid component. I would like the left side of this grid perfectly vertically aligned with the title above.

I tried putting a spacing={2} on the Grid container, but this causes that the padding of the Grid item also is on the left side, which makes it not aligned with the title above anymore. Is there a way to simply have this padding on the inside between the different Grid items?

<Box my={2}>
    <Typography variant='h6'>
        Hoeveel spaart u maandelijks tot uw pensioen?
    </Typography>
</Box>
<Grid className={classes.scenarioBlock} container spacing={2}>
    <Grid item xs={12} sm={6}>
        <ScenarioOption selected {...monthlySavingGoal}>
            <CustomSlider
                onChange={
                  value =>
                    setAmounts(state => ({ ...state, monthlySavings: value }))
                  // should we check the scenario when they move the slider?
                  // if (!selected[name]) setSelected((state) => ({ ...state, [name]: true }));
                }
                color='primary'
                value={amounts.monthlySavings}
                min={monthlySavingGoal.sliderValues.min}
                max={monthlySavingGoal.sliderValues.max}
                step={monthlySavingGoal.sliderValues.step}
              />
        </ScenarioOption>
    </Grid></Grid>

enter image description here

cssreactjsmaterial-uijss


Solution 1:[1]

As I recently ran into this problem as well, I want to share the solution I found. In my case, the Grid container (and some other content, in your case the Box) were wrapped in an MUI Stack (for spacing purposes). This Stack was wrapped in an MUI Container (for horizontal centering). So my structure was:

<Container>
  <Stack spacing={1}>
    ...some surrounding content that should be left-aligned
    
    <Grid container spacing={2}>
      ...some Grid items         
    </Grid>    
  </Stack>
</Container>

I solved the indentation/misalignment by simply wrapping the Grid container in any other element, the most trivial example being a div element. Someone with more advanced MUI knowledge can possibly give a better explanation to why this makes the difference. So afterwards, my code looked like:

<Container>
  <Stack spacing={1}>
    ...some surrounding content that is left-aligned to the Grid below
    

    <div>
      <Grid container spacing={2}>
        ...some Grid items         
      </Grid>
    </div>
  </Stack>
</Container>

And by that my Grid was (horizontally) aligned to the surrounding content. Hope this helps! If I stumble upon the explanation, I will add it to this answer.

Solution 2:[2]

By default material ui will add a gutter for the Grid item component, you just need to modify the grid component and add some style or class prop that removes the padding:

// Rest of the code
<Grid item xs={12} sm={6} style={{padding: 0}}>
</Grid>

You could also use a custom className using material UI makeStyles and just apply the class to the Grid item component.

const useStyles = makeStyles(() => ({
  item: {
    padding: 0,
  },
}))

And in your component:

const classes = useStyles()

return (
 {/* Rest of the code*/}
 <Grid 
  item
  xs={12}
  sm={6}
  classes={{
   // Here's the override with your custom item class.
   item: classes.item,
  }}
 >
 </Grid>   
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 luxx
Solution 2

Related Questions