[grid] Fix column spacing for nested containers (#43733)

packages/mui-material/src/Grid2/Grid2.tsx

@@ -53,24 +53,29 @@ export interface GridBaseProps {
   offset?: ResponsiveStyleValue<GridOffset>;
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level?: number;
@@ -223,24 +228,29 @@ Grid2.propTypes /* remove-proptypes */ = {
   ]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,

packages/mui-material/src/PigmentGrid/PigmentGrid.tsx

@@ -55,29 +55,6 @@ export interface GridBaseProps {
    * Defines the offset of the grid.
    */
   offset?: ResponsiveStyleValue<number> | undefined;
-  /**
-   * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
-   * ```
-   *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
-   * ```
-   */
-  unstable_level?: number;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
@@ -252,29 +229,6 @@ PigmentGrid.propTypes /* remove-proptypes */ = {
     PropTypes.func,
     PropTypes.object,
   ]),
-  /**
-   * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
-   * ```
-   *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
-   * ```
-   */
-  unstable_level: PropTypes.number,
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.

packages/mui-system/src/Grid/Grid.tsx

@@ -108,24 +108,29 @@ Grid.propTypes /* remove-proptypes */ = {
   ]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,

packages/mui-system/src/Grid/GridProps.ts

@@ -49,24 +49,29 @@ export interface GridBaseProps {
   offset?: ResponsiveStyleValue<GridOffset>;
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level?: number;

packages/mui-system/src/Grid/createGrid.tsx

@@ -169,7 +169,12 @@ export default function createGrid(
         {...other}
       >
         {React.Children.map(children, (child) => {
-          if (React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+          if (
+            React.isValidElement(child) &&
+            isMuiElement(child, ['Grid']) &&
+            container &&
+            child.props.container
+          ) {
             return React.cloneElement(child, {
               unstable_level: (child.props as GridProps)?.unstable_level ?? level + 1,
             } as GridProps);