Material-ui: [Grid] Spacing with negative margins results in sometimes imprecise layouts

[bluepeter]

I am using Grid to align-right buttons in a Card. Everything used to look super, but in recent incarnations of material-ui-next, the use of negative margins is resulting in non-ideal presentation with the right negative margin:

The code for this is:

<CardActions>
  <Grid container justify="flex-end">
    <Grid item>
      (buttons)
    </Grid>
  </Grid>
</CardActions>

Is there a preferred implementation for what I'm trying to achieve here?

[oliviertassinari]

@bluepeter It's hard to help without a live example of such issue. From your code, you would say that the best option is to use spacing={0}.

- <Grid container justify="flex-end">
+ <Grid container justify="flex-end" spacing={0}>
    <Grid item>

I start to think that it should be the default behavior. The negative margin can really cause trouble. It might not worth having spacing={8} by default. cc @mui-org/core-contributors.

[bluepeter]

Thank you. Adding spacing={0} to Grid container fixed this for me.

[ndrewr]

This worked for me, too. 👌
Was using spacing={16} or otherwise leaving unspecified. Result was strange on mobile, with small slivers of blank page to the right and bottom I could not account for and that overflow css rule couldn't totally address 😂

[PutziSan]

@oliviertassinari If you introduce this breaking change, it would have a massive impact for an existing v1.0-solution (recheck every Grid-container-use, which is nearly every second component in my projects). would it be possible to add the default-grid-spacing-value in a theme-varaible?

[rosskevin]

@putzisan you can always make your own Grid with your own default props and simply search/replace imports. This is a simple 5 minutes or less workaround for you.

Now is the time for breaking changes, not post-1.0.