However, it doesn't seem to work well either in https://next.material-ui.com/components/grid/#nested-grid.

Hopefully it will be fixed in v5.

My bad, I have overlooked the issue. It's actually the demo of the documentation that is wrong. We have had this visual regression test for it, it has been here for 3 years, it works:

I would suggest this diff in the documentation:

diff --git a/docs/src/pages/components/grid/NestedGrid.tsx b/docs/src/pages/components/grid/NestedGrid.tsx
index 864ed53077..356ddaa65e 100644
--- a/docs/src/pages/components/grid/NestedGrid.tsx
+++ b/docs/src/pages/components/grid/NestedGrid.tsx
@@ -38,13 +38,13 @@ export default function NestedGrid() {
   return (
     <div className={classes.root}>
       <Grid container spacing={1}>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
       </Grid>

https://codesandbox.io/s/material-nested-grid-bug-forked-w8s76?file=/demo.tsx

@buitrbao222 do you want to work on a pull request? :)

Kinda surprised that more people haven't run into this issue. This my first time using Material UI and I've already hit this.

My issue was really difficult to even identify what I was doing wrong. In my codesandbox, change both sm={6}s to just sm. I thought to myself "surely these are the same thing in this context", but turns out not.

IMO <Grid container item /> it should at least be removed from the docs since it creates unwanted bugs depending on the combination of props passed.

@k-funk What do you think about this change in the documentation? I have seen many developers successfully use it. Flexbox was designed to support it.

diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md
index 716d47bb89..76b90a459e 100644
--- a/docs/src/pages/components/grid/grid.md
+++ b/docs/src/pages/components/grid/grid.md
@@ -89,6 +89,12 @@ https://www.w3.org/TR/css-flexbox-1/#box-model

 {{"demo": "pages/components/grid/NestedGrid.js", "bg": true}}

+❌ Defining an explicit width to a Grid element that is flex container, flex item and has spacing at the same time lead to unexpected behavior, avoid doing it:
+
+```jsx
+<Grid spacing={1} container item xs={12}>
+```
+
+If you need to do such, remove one of the props.

 ## Limitations

 ### Negative margin

Actually, we can even add a runtime warning and document the limitation under http://next.material-ui.com/components/grid/#limitations.

@k-funk What do you think about this change in the documentation? I have seen many developers successfully use it. Flexbox was designed to support it.

diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md
index 716d47bb89..76b90a459e 100644
--- a/docs/src/pages/components/grid/grid.md
+++ b/docs/src/pages/components/grid/grid.md
@@ -89,6 +89,12 @@ https://www.w3.org/TR/css-flexbox-1/#box-model

 {{"demo": "pages/components/grid/NestedGrid.js", "bg": true}}

+❌ Defining an explicit width to a Grid element that is flex container, flex item and has spacing at the same time lead to unexpected behavior, avoid doing it:
+
+```jsx
+<Grid spacing={1} container item xs={12}>
+```
+
+If you need to do such, remove one of the props.

 ## Limitations

 ### Negative margin

Actually, we can even add a runtime warning and document the limitation under http://next.material-ui.com/components/grid/#limitations.

Maybe both?

For myself (and I assume a lot of others), I don't read the docs in their entirety when first trying out a new library. I'm first trying to discover "will this work for me? is it easy to work with? do the docs describe real-work problems?". I try out the pieces that I need, so I appreciate when caveats are noted inline or next to the same line as the first example usage, such as:

<Grid container spacing={1}>
  // DON'T  include explicit widths in combination to a Grid element that is flex container. See "Limitations" section.
  <Grid container item xs spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item xs spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item xs spacing={3}>
    <FormRow />
  </Grid>
</Grid>

Additionally, typescript should be able to prevent people from doing this in the first place, which might guide people back to the docs.

My bad, I have overlooked the issue. It's actually the demo of the documentation that is wrong. We have had this visual regression test for it, it has been here for 3 years, it works:

I would suggest this diff in the documentation:

diff --git a/docs/src/pages/components/grid/NestedGrid.tsx b/docs/src/pages/components/grid/NestedGrid.tsx
index 864ed53077..356ddaa65e 100644
--- a/docs/src/pages/components/grid/NestedGrid.tsx
+++ b/docs/src/pages/components/grid/NestedGrid.tsx
@@ -38,13 +38,13 @@ export default function NestedGrid() {
   return (
     <div className={classes.root}>
       <Grid container spacing={1}>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
-        <Grid container item xs={12} spacing={3}>
+        <Grid container item spacing={3}>
           <FormRow />
         </Grid>
       </Grid>

https://codesandbox.io/s/material-nested-grid-bug-forked-w8s76?file=/demo.tsx

@buitrbao222 do you want to work on a pull request? :)

If you don't mind me asking, how would I make a pull request? I've never contributed to an open source project before. I thought I could fork the codesandbox example then make a pull request from it but it is not linked to any GitHub repository.

Start with https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md :)