[Grid] Grid system spacing not creating proper gutters in v5

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

MUI V5 Grid doesn’t create gutters. Instead when spacing is applied the entire grid overlaps other elements and the items inside the grid are squashed to the bottom. This looks terrible. I have the basic code from my app but also have managed to reproduce it on my first code sandbox which I dont know how to use properly.

Here is the basic code:

{/* Testing Grid Spacing */}
          <Box component='section'>
              <Typography variant='h5'>Testing Spacing</Typography>
              <Box>
                <Grid container spacing={5}>
                    <Grid item sx={{backgroundColor: 'primary.dark'}}>Item 1</Grid>
                    <Grid item sx={{backgroundColor: 'primary.main'}}>Item 2</Grid>
                    <Grid item sx={{backgroundColor: 'primary.light'}}>Item 3</Grid>
                </Grid>
              </Box>
          </Box>

Here are the screenshots before and after adding spacing:

Before spacing:

After adding a spacing of 5:

I have managed to reproduce this in code sandbox as well But I am new to this so if I haven’t done anything properly please let me know:

https://codesandbox.io/s/quirky-lake-50pqf5?file=/src/Demo.tsx

Expected behavior 🤔

There should be clean clear gutters between the items

Steps to reproduce 🕹

Steps:

1. Create a basic Grid with three or four items in it, provide spacing and see if the gutters are there
2. Or See the Code sandbox provided in the link

Context 🔦

If I must provide a context, I am learning MUI to use for my react projects so Im just testing the basics. I would expect this to work out of the box but it isn’t

Most importantly, If nothing is wrong and I have just made a silly error, please do let me know what it is because I have been banging my head against the wall for hours over this.

Thank you

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[dohomi]

Another major issue on v5 is nesting of grid rows, due to the padding top. In v4 it was possible to have a grid row nested and vertical aligned to the center, now due to the paddingTop a grid row will never be centered.

[siriwatknp]

@theMyth721 Hey, we have released Grid v2 in v5.9.1 which fixes this issue. Can you give it a try?

The doc is not live but you can take a look at https://deploy-preview-33554--material-ui.netlify.app/material-ui/react-grid2/. (Here is the PR for the doc)

The usage is like this:

import Grid from '@mui/material/Unstable_Grid2';