[Grid] When placing multiple containers, they overlap

[RestonAbaqus]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When placing Grid containers under the first one they overlap with the top one, this behavior does not happen with material v4

 <Grid container spacing={2}>
        <Grid item xs={4}>
          <Paper className={classes.paper}>Grid cell 1, 1</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>Grid cell 2, 1</Paper>
        </Grid>
      </Grid>
      <Grid container spacing={2}>
        <Grid item xs={4}>
          <Paper className={classes.paper}>Grid cell 1, 2</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>Grid cell 2, 2</Paper>
        </Grid>
      </Grid>

When checking the css the grid container's root has some margin-top negative

    margin-top: -16px;
    width: calc(100% + 16px);
    margin-left: -16px;

Expected behavior 🤔

I would expect the same behavior as version 4

Steps to reproduce 🕹

You can check how they overlap here

v5 not working example
v4 working example

Context 🔦

I want that grid containers to not overlap with other components as it happens on version 4

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.19.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
  npmPackages:
    @emotion/react: ^11.7.0 => 11.7.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.58 
    @mui/icons-material: ^5.2.0 => 5.2.0 
    @mui/lab: ^5.0.0-alpha.58 => 5.0.0-alpha.58 
    @mui/material: ^5.2.8 => 5.2.8 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.6 
    @mui/styles: ^5.2.2 => 5.2.2 
    @mui/system:  5.2.8 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react:  17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

[hbjORbj]

Hi, this is already documented in Grid docs: https://mui.com/components/grid/#negative-margin

The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors.

I suggest you to tweak margin of containers, e.g., passing sx={{ marginTop: 0 }} to the second Grid container. Please check out https://codesandbox.io/s/overlaping-container-grid-forked-7frp5

[RestonAbaqus]

Hi, this is already documented in Grid docs: https://mui.com/components/grid/#negative-margin

The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors.

I suggest you to tweak margin of containers, e.g., passing sx={{ marginTop: 0 }} to the second Grid container. Please check out https://codesandbox.io/s/overlaping-container-grid-forked-7frp5

That doc quote is referring to items, no containers root, this is not an expected behavior for my understanding because that same info is in v4 docs https://v4.mui.com/components/grid/#limitations and we are not having the same effect.

The only different I can see is the margin-top: 0px; on containers root in v4 but in v5 is margin-top: -16px;

I know I can fix the grid putting margin-top: 0 to all grid containers but why did this changed and was working properly on v4? If you put any other component on top of the grid you'll have an overlapping component every time.

[hbjORbj]

The spacing between items is implemented with a negative margin.

items here do not only mean grid items, but elements in general.

The negative margin is introduced from the change in #24332. The issue you are having can be resolved by tweaking margin, while the issue in #24332 does not have such a simple fix. That's why we are not reverting the change in a hasty manner.

[MilesRaker]

Kudos for this thread! This fix worked for me.

[Jenrikk]

amazing, now it seems to work as V4