Component <Grid /> margin: -8px

[wzalazar]

When I use component , given the following code it adds the below css rules

.MuiGrid-spacing-xs-16 {
    width: calc(100% + 16px);
    margin: -8px;
} 

My code

<Grid container direction={'row'} justify={'space-between'} align={'flex-start'}>
        <Grid>
          <OfferPreview />
        </Grid>
        <Grid>
          <OfferPreview />
        </Grid>
</Grid>

The result is that the container overlaping. Because the margin -8px affect also top and bottom.

The fix could be...

.MuiGrid-spacing-xs-16 {
    width: calc(100% + 16px);
    margin: 0 -8px;
} 

Version

• Material-UI: 1.0.0-beta.5

[oliviertassinari]

Is this a duplicate of #7466? Also, please provide a reproduction if not (could be codesandbox.io/webpackbin/etc.)

[wzalazar]

maybe is related with #7466, but my bug is more specific with top and bottom.

Demo

https://codesandbox.io/s/7mzoqvwm0q

if you apply the fix, this is the result...

.MuiGrid-spacing-xs-16 {
    width: calc(100% + 16px);
    margin: 0 -8px;
} 

[oliviertassinari]

Grid container > Grid > Grid container > div is not a valid Grid usage, please refer to the documentation. Also, here a more appropriate version: https://codesandbox.io/s/5kp1rmop2x.

[wzalazar]

you're right, I didn't put item property for my <Grid />.

My demo:

https://codesandbox.io/s/r58mqzzv2n

Thanks @oliviertassinari