diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
index 0ee011f5d8db8d..cbb6c2bfdc5221 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.tsx
+++ b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid, { GridDirection } from '@material-ui/core/Grid';
+import Grid, { GridProps } from '@material-ui/core/Grid';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -23,8 +23,10 @@ type GridJustification =
   | 'space-around'
   | 'space-evenly';
 
+type Direction = Exclude<GridProps['direction'], undefined>;
+
 export default function InteractiveGrid() {
-  const [direction, setDirection] = React.useState<GridDirection>('row');
+  const [direction, setDirection] = React.useState<Direction>('row');
   const [justifyContent, setJustifyContent] = React.useState<GridJustification>(
     'center',
   );
@@ -80,7 +82,7 @@ export default function InteractiveGrid() {
                   value={direction}
                   onChange={(event) => {
                     setDirection(
-                      (event.target as HTMLInputElement).value as GridDirection,
+                      (event.target as HTMLInputElement).value as Direction,
                     );
                   }}
                 >
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 584edd0ddbffb5..35d11f9fce638d 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -832,6 +832,24 @@ As the core components use emotion as a styled engine, the props used by emotion
   });
   ```
 
+- The auxiliary types `GridDirection`, `GridSpacing`, `GridWrap` and `GridSize` are not exported anymore. Instead, get them from `GridProps`.
+
+  ```diff
+  -import { GridDirection, GridSpacing, GridWrap, GridSize } from '@material-ui/core/Grid';
+  +import { GridProps } from '@material-ui/core/Grid';
+
+  interface Props {
+  - direction: GridDirection;
+  - spacing: GridSpacing;
+  - wrap: GridWrap;
+  - size: GridSize;
+  + direction: GridProps['direction'];
+  + spacing: GridProps['spacing'];
+  + wrap: GridProps['wrap'];
+  + size: Exclude<GridProps['xs'], boolean>;
+  }
+  ```
+
 ### GridList
 
 - Rename the `GridList` components to `ImageList` to align with the current Material Design naming.
diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts
index e0222e8a6ce0f4..f4c0a8b3de50a3 100644
--- a/packages/material-ui/src/Grid/Grid.d.ts
+++ b/packages/material-ui/src/Grid/Grid.d.ts
@@ -3,13 +3,7 @@ import { SxProps, SystemProps } from '@material-ui/system';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-
-export type GridSpacing = number | string;
-
-export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-
-export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export type GridClassKey = keyof NonNullable<GridTypeMap['props']['classes']>;
 
@@ -83,7 +77,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * It is applied for all screen sizes.
        * @default 'row'
        */
-      direction?: GridDirection;
+      direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
       /**
        * If `true`, the component will have the flex *item* behavior.
        * You should be wrapping *items* with a *container*.
@@ -113,7 +107,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * It can only be used on a type `container` component.
        * @default 0
        */
-      spacing?: GridSpacing;
+      spacing?: string | number;
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
@@ -123,7 +117,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * It's applied for all screen sizes.
        * @default 'wrap'
        */
-      wrap?: GridWrap;
+      wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
       /**
        * Defines the number of grids the component is going to use.
        * It's applied for the `xl` breakpoint and wider screens.