diff --git a/docs/pages/api-docs/grid.md b/docs/pages/api-docs/grid.md
index 6e9af5bc970f55..d17010b26b3bce 100644
--- a/docs/pages/api-docs/grid.md
+++ b/docs/pages/api-docs/grid.md
@@ -36,7 +36,8 @@ The `MuiGrid` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">container</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
 | <span class="prop-name">direction</span> | <span class="prop-type">'row'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'column-reverse'</span> | <span class="prop-default">'row'</span> | Defines the `flex-direction` style property. It is applied for all screen sizes. |
 | <span class="prop-name">item</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
-| <span class="prop-name">justify</span> | <span class="prop-type">'flex-start'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'flex-end'<br>&#124;&nbsp;'space-between'<br>&#124;&nbsp;'space-around'<br>&#124;&nbsp;'space-evenly'</span> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
+| ~~<span class="prop-name">justify</span>~~ | <span class="prop-type">oneOf(['center'</span> |  | *Deprecated*. Use `justifyContent` instead, the prop was renamed.<br><br>Defines the `justify-content` style property. It is applied for all screen sizes. |
+| <span class="prop-name">justifyContent</span> | <span class="prop-type">'center'<br>&#124;&nbsp;'flex-end'<br>&#124;&nbsp;'space-between'<br>&#124;&nbsp;'space-around'<br>&#124;&nbsp;'space-evenly'</span> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
 | <span class="prop-name">lg</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
@@ -72,11 +73,11 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">align-content-xs-flex-end</span> | <span class="prop-name">.MuiGrid-align-content-xs-flex-end</span> | 
 | <span class="prop-name">align-content-xs-space-between</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-between</span> | 
 | <span class="prop-name">align-content-xs-space-around</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-center</span> | <span class="prop-name">.MuiGrid-justify-xs-center</span> | 
-| <span class="prop-name">justify-xs-flex-end</span> | <span class="prop-name">.MuiGrid-justify-xs-flex-end</span> | 
-| <span class="prop-name">justify-xs-space-between</span> | <span class="prop-name">.MuiGrid-justify-xs-space-between</span> | 
-| <span class="prop-name">justify-xs-space-around</span> | <span class="prop-name">.MuiGrid-justify-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-space-evenly</span> | <span class="prop-name">.MuiGrid-justify-xs-space-evenly</span> | 
+| <span class="prop-name">justify-content-xs-center</span> | <span class="prop-name">.MuiGrid-justify-content-xs-center</span> | 
+| <span class="prop-name">justify-content-xs-flex-end</span> | <span class="prop-name">.MuiGrid-justify-content-xs-flex-end</span> | 
+| <span class="prop-name">justify-content-xs-space-between</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-between</span> | 
+| <span class="prop-name">justify-content-xs-space-around</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-around</span> | 
+| <span class="prop-name">justify-content-xs-space-evenly</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-evenly</span> | 
 | <span class="prop-name">spacing-xs-1</span> | <span class="prop-name">.MuiGrid-spacing-xs-1</span> | 
 | <span class="prop-name">spacing-xs-2</span> | <span class="prop-name">.MuiGrid-spacing-xs-2</span> | 
 | <span class="prop-name">spacing-xs-3</span> | <span class="prop-name">.MuiGrid-spacing-xs-3</span> | 
diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
index 41b68a821491b3..d7f6ba1d11a0cd 100644
--- a/docs/src/pages/components/chips/ChipsPlayground.js
+++ b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -104,7 +104,7 @@ function ChipsPlayground(props) {
   return (
     <Grid container className={classes.root}>
       <Grid item xs={12}>
-        <Grid container justify="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           <Grid item className={classes.chipWrapper}>
             <Chip
               label="Chip Component"
diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js
index 54872088b17a2f..cb53f308e235ab 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.js
+++ b/docs/src/pages/components/grid/InteractiveGrid.js
@@ -29,14 +29,14 @@ const useStyles = makeStyles((theme) => ({
 export default function InteractiveGrid() {
   const classes = useStyles();
   const [direction, setDirection] = React.useState('row');
-  const [justify, setJustify] = React.useState('center');
+  const [justifyContent, setJustifyContent] = React.useState('center');
   const [alignItems, setAlignItems] = React.useState('center');
 
   const jsx = `
 <Grid
   container
   direction="${direction}"
-  justify="${justify}"
+  justifyContent="${justifyContent}"
   alignItems="${alignItems}"
 >
 `;
@@ -50,7 +50,7 @@ export default function InteractiveGrid() {
           className={classes.demo}
           alignItems={alignItems}
           direction={direction}
-          justify={justify}
+          justifyContent={justifyContent}
         >
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
@@ -92,14 +92,14 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justify</FormLabel>
+                <FormLabel>justifyContent</FormLabel>
                 <RadioGroup
                   row
-                  name="justify"
-                  aria-label="justify"
-                  value={justify}
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
                   onChange={(event) => {
-                    setJustify(event.target.value);
+                    setJustifyContent(event.target.value);
                   }}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
index 581450ae276e9c..2627857228f873 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.tsx
+++ b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -31,14 +31,14 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function InteractiveGrid() {
   const classes = useStyles();
   const [direction, setDirection] = React.useState<GridDirection>('row');
-  const [justify, setJustify] = React.useState<GridJustification>('center');
+  const [justifyContent, setJustifyContent] = React.useState<GridJustification>('center');
   const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
 
   const jsx = `
 <Grid
   container
   direction="${direction}"
-  justify="${justify}"
+  justifyContent="${justifyContent}"
   alignItems="${alignItems}"
 >
 `;
@@ -52,7 +52,7 @@ export default function InteractiveGrid() {
           className={classes.demo}
           alignItems={alignItems}
           direction={direction}
-          justify={justify}
+          justifyContent={justifyContent}
         >
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
@@ -94,14 +94,16 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justify</FormLabel>
+                <FormLabel>justifyContent</FormLabel>
                 <RadioGroup
                   row
-                  name="justify"
-                  aria-label="justify"
-                  value={justify}
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
                   onChange={(event) => {
-                    setJustify((event.target as HTMLInputElement).value as GridJustification);
+                    setJustifyContent(
+                      (event.target as HTMLInputElement).value as GridJustification,
+                    );
                   }}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js
index 1198a4d237f187..6b29a64f73a473 100644
--- a/docs/src/pages/components/grid/SpacingGrid.js
+++ b/docs/src/pages/components/grid/SpacingGrid.js
@@ -31,7 +31,7 @@ export default function SpacingGrid() {
   return (
     <Grid container className={classes.root} spacing={2}>
       <Grid item xs={12}>
-        <Grid container justify="center" spacing={spacing}>
+        <Grid container justifyContent="center" spacing={spacing}>
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
               <Paper className={classes.paper} />
diff --git a/docs/src/pages/components/grid/SpacingGrid.tsx b/docs/src/pages/components/grid/SpacingGrid.tsx
index 1f1de7a2eb8a64..5fb118256d6d34 100644
--- a/docs/src/pages/components/grid/SpacingGrid.tsx
+++ b/docs/src/pages/components/grid/SpacingGrid.tsx
@@ -33,7 +33,7 @@ export default function SpacingGrid() {
   return (
     <Grid container className={classes.root} spacing={2}>
       <Grid item xs={12}>
-        <Grid container justify="center" spacing={spacing}>
+        <Grid container justifyContent="center" spacing={spacing}>
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
               <Paper className={classes.paper} />
diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
index e473b95a4ef36f..ae336dc1ab6eb5 100644
--- a/docs/src/pages/components/material-icons/SearchIcons.js
+++ b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -221,12 +221,12 @@ let DialogDetails = (props) => {
           <DialogContent>
             <Grid container className={classes.container}>
               <Grid item xs={12} sm="auto">
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon className={classes.canvas} />
                 </Grid>
               </Grid>
               <Grid item xs>
-                <Grid container alignItems="flex-end" justify="center">
+                <Grid container alignItems="flex-end" justifyContent="center">
                   <Grid item>
                     <Tooltip title="fontSize small">
                       <selectedIcon.Icon className={classes.fontSize} fontSize="small" />
@@ -243,13 +243,12 @@ let DialogDetails = (props) => {
                     </Tooltip>
                   </Grid>
                 </Grid>
-                <Grid container justify="center">
-                  <selectedIcon.Icon className={clsx(classes.context, classes.contextPrimary)} />
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextPrimaryInverse)}
                   />
                 </Grid>
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextTextPrimary)}
                   />
@@ -257,7 +256,7 @@ let DialogDetails = (props) => {
                     className={clsx(classes.context, classes.contextTextPrimaryInverse)}
                   />
                 </Grid>
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextTextSecondary)}
                   />
diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.js b/docs/src/pages/components/pickers/MaterialUIPickers.js
index 68cadce376d04f..71ede1168166a3 100644
--- a/docs/src/pages/components/pickers/MaterialUIPickers.js
+++ b/docs/src/pages/components/pickers/MaterialUIPickers.js
@@ -18,7 +18,7 @@ export default function MaterialUIPickers() {
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Grid container justify="space-around">
+      <Grid container justifyContent="space-around">
         <KeyboardDatePicker
           disableToolbar
           variant="inline"
diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.tsx b/docs/src/pages/components/pickers/MaterialUIPickers.tsx
index 15f6cf2f921460..e4337b4253d24b 100644
--- a/docs/src/pages/components/pickers/MaterialUIPickers.tsx
+++ b/docs/src/pages/components/pickers/MaterialUIPickers.tsx
@@ -20,7 +20,7 @@ export default function MaterialUIPickers() {
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Grid container justify="space-around">
+      <Grid container justifyContent="space-around">
         <KeyboardDatePicker
           disableToolbar
           variant="inline"
diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
index 7c7ccacd45f168..5d68a774bb278e 100644
--- a/docs/src/pages/components/popover/AnchorPlayground.js
+++ b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -145,7 +145,7 @@ function AnchorPlayground(props) {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item className={classes.buttonWrapper}>
           <Button ref={anchorRef} variant="contained" onClick={handleClickButton}>
             Open Popover
diff --git a/docs/src/pages/components/popper/PositionedPopper.js b/docs/src/pages/components/popper/PositionedPopper.js
index b3f7655f85c2a9..32679cf620b38c 100644
--- a/docs/src/pages/components/popper/PositionedPopper.js
+++ b/docs/src/pages/components/popper/PositionedPopper.js
@@ -39,14 +39,14 @@ export default function PositionedPopper() {
           </Fade>
         )}
       </Popper>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('top-start')}>top-start</Button>
           <Button onClick={handleClick('top')}>top</Button>
           <Button onClick={handleClick('top-end')}>top-end</Button>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Button onClick={handleClick('left-start')}>left-start</Button>
           <br />
@@ -66,7 +66,7 @@ export default function PositionedPopper() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
           <Button onClick={handleClick('bottom')}>bottom</Button>
diff --git a/docs/src/pages/components/popper/PositionedPopper.tsx b/docs/src/pages/components/popper/PositionedPopper.tsx
index 114a928384535c..55dc8c18feac10 100644
--- a/docs/src/pages/components/popper/PositionedPopper.tsx
+++ b/docs/src/pages/components/popper/PositionedPopper.tsx
@@ -43,14 +43,14 @@ export default function PositionedPopper() {
           </Fade>
         )}
       </Popper>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('top-start')}>top-start</Button>
           <Button onClick={handleClick('top')}>top</Button>
           <Button onClick={handleClick('top-end')}>top-end</Button>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Button onClick={handleClick('left-start')}>left-start</Button>
           <br />
@@ -70,7 +70,7 @@ export default function PositionedPopper() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
           <Button onClick={handleClick('bottom')}>bottom</Button>
diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js
index 2270f9588c73ec..8e9b0392bc4512 100644
--- a/docs/src/pages/components/popper/ScrollPlayground.js
+++ b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -156,7 +156,7 @@ export default function ScrollPlayground() {
           className={classes.scroll}
           container
           alignItems="center"
-          justify="center"
+          justifyContent="center"
           ref={centerScroll}
         >
           <div>
diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.js b/docs/src/pages/components/tooltips/PositionedTooltips.js
index eb693bcab8a07e..22b0578e2492e1 100644
--- a/docs/src/pages/components/tooltips/PositionedTooltips.js
+++ b/docs/src/pages/components/tooltips/PositionedTooltips.js
@@ -15,7 +15,7 @@ export default function PositionedTooltips() {
 
   return (
     <div className={classes.root}>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
             <Button>top-start</Button>
@@ -28,7 +28,7 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Tooltip title="Add" placement="left-start">
             <Button>left-start</Button>
@@ -60,7 +60,7 @@ export default function PositionedTooltips() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="bottom-start">
             <Button>bottom-start</Button>
diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.tsx b/docs/src/pages/components/tooltips/PositionedTooltips.tsx
index eb693bcab8a07e..22b0578e2492e1 100644
--- a/docs/src/pages/components/tooltips/PositionedTooltips.tsx
+++ b/docs/src/pages/components/tooltips/PositionedTooltips.tsx
@@ -15,7 +15,7 @@ export default function PositionedTooltips() {
 
   return (
     <div className={classes.root}>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
             <Button>top-start</Button>
@@ -28,7 +28,7 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Tooltip title="Add" placement="left-start">
             <Button>left-start</Button>
@@ -60,7 +60,7 @@ export default function PositionedTooltips() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="bottom-start">
             <Button>bottom-start</Button>
diff --git a/docs/src/pages/components/tooltips/TriggersTooltips.js b/docs/src/pages/components/tooltips/TriggersTooltips.js
index 6f435df71f2004..75e05310a5b7f0 100644
--- a/docs/src/pages/components/tooltips/TriggersTooltips.js
+++ b/docs/src/pages/components/tooltips/TriggersTooltips.js
@@ -17,7 +17,7 @@ export default function TriggersTooltips() {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip disableFocusListener title="Add">
             <Button>Hover or touch</Button>
diff --git a/docs/src/pages/components/tooltips/TriggersTooltips.tsx b/docs/src/pages/components/tooltips/TriggersTooltips.tsx
index 6f435df71f2004..75e05310a5b7f0 100644
--- a/docs/src/pages/components/tooltips/TriggersTooltips.tsx
+++ b/docs/src/pages/components/tooltips/TriggersTooltips.tsx
@@ -17,7 +17,7 @@ export default function TriggersTooltips() {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip disableFocusListener title="Add">
             <Button>Hover or touch</Button>
diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.js b/docs/src/pages/components/transfer-list/SelectAllTransferList.js
index 80251070eecb87..4d03f8872adc0a 100644
--- a/docs/src/pages/components/transfer-list/SelectAllTransferList.js
+++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.js
@@ -126,7 +126,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList('Choices', left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">
diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx b/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx
index d6ab306d6c48ef..2fb133d417f70b 100644
--- a/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx
+++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx
@@ -128,7 +128,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList('Choices', left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">
diff --git a/docs/src/pages/components/transfer-list/TransferList.js b/docs/src/pages/components/transfer-list/TransferList.js
index be5282befdd64a..2ff7765256f23f 100644
--- a/docs/src/pages/components/transfer-list/TransferList.js
+++ b/docs/src/pages/components/transfer-list/TransferList.js
@@ -101,7 +101,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList(left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">
diff --git a/docs/src/pages/components/transfer-list/TransferList.tsx b/docs/src/pages/components/transfer-list/TransferList.tsx
index 30a6e6fcef9386..add27a109cc151 100644
--- a/docs/src/pages/components/transfer-list/TransferList.tsx
+++ b/docs/src/pages/components/transfer-list/TransferList.tsx
@@ -103,7 +103,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList(left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">
diff --git a/docs/src/pages/getting-started/templates/album/Album.js b/docs/src/pages/getting-started/templates/album/Album.js
index b716de5b626766..10d498b9cc3877 100644
--- a/docs/src/pages/getting-started/templates/album/Album.js
+++ b/docs/src/pages/getting-started/templates/album/Album.js
@@ -88,7 +88,7 @@ export default function Album() {
               entirely.
             </Typography>
             <div className={classes.heroButtons}>
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 <Grid item>
                   <Button variant="contained" color="primary">
                     Main call to action
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js
index dcee983306a1ec..34ea9ca851f9f0 100644
--- a/docs/src/pages/getting-started/templates/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js
@@ -207,7 +207,7 @@ export default function Pricing() {
       </Container>
       {/* Footer */}
       <Container maxWidth="md" component="footer" className={classes.footer}>
-        <Grid container spacing={4} justify="space-evenly">
+        <Grid container spacing={4} justifyContent="space-evenly">
           {footers.map((footer) => (
             <Grid item xs={6} sm={3} key={footer.title}>
               <Typography variant="h6" color="textPrimary" gutterBottom>
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
index a8cb440ca9d365..a3fa8af5771bec 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
@@ -123,7 +123,7 @@ export default function SignUp() {
           >
             Sign Up
           </Button>
-          <Grid container justify="flex-end">
+          <Grid container justifyContent="flex-end">
             <Grid item>
               <Link href="#" variant="body2">
                 Already have an account? Sign in
diff --git a/docs/src/pages/landing/Themes.js b/docs/src/pages/landing/Themes.js
index e653fc631f3256..6909813bed4cf9 100644
--- a/docs/src/pages/landing/Themes.js
+++ b/docs/src/pages/landing/Themes.js
@@ -66,7 +66,7 @@ export default function Themes() {
               />
             </NoSsr>
           </Link>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <Button
               variant="outlined"
               data-ga-event-category="store"
diff --git a/docs/src/pages/landing/Users.js b/docs/src/pages/landing/Users.js
index 8c00d7d846e597..b59764c29821be 100644
--- a/docs/src/pages/landing/Users.js
+++ b/docs/src/pages/landing/Users.js
@@ -137,7 +137,7 @@ export default function Users() {
             <Typography variant="body1" align="center" gutterBottom>
               {t('joinThese')}
             </Typography>
-            <Grid container justify="center" className={classes.grid}>
+            <Grid container justifyContent="center" className={classes.grid}>
               {users.map((user) => (
                 <img
                   key={user.caption}
@@ -153,7 +153,7 @@ export default function Users() {
             <Typography variant="body1" align="center" gutterBottom>
               {t('usingMui')}
             </Typography>
-            <Grid container justify="center">
+            <Grid container justifyContent="center">
               <Button
                 variant="outlined"
                 href="https://github.com/mui-org/material-ui/issues/22426"
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
index 069c74291fd507..7f2d3aa136ebf3 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
@@ -83,7 +83,7 @@ export default function AppFooter() {
             <Grid
               container
               direction="column"
-              justify="flex-end"
+              justifyContent="flex-end"
               className={classes.iconsWrapper}
               spacing={2}
             >
diff --git a/docs/src/pages/system/basics/RealWorld.js b/docs/src/pages/system/basics/RealWorld.js
index 561a2d5911b3e4..5ec6acc11d851e 100644
--- a/docs/src/pages/system/basics/RealWorld.js
+++ b/docs/src/pages/system/basics/RealWorld.js
@@ -23,7 +23,7 @@ export default function RealWorld() {
             <Typography>You have lost connection to the internet. This app is offline.</Typography>
           </Grid>
         </Grid>
-        <Grid container justify="flex-end" spacing={1}>
+        <Grid container justifyContent="flex-end" spacing={1}>
           <Grid item>
             <Button color="primary">Turn on wifi</Button>
           </Grid>
diff --git a/docs/src/pages/system/basics/RealWorld.tsx b/docs/src/pages/system/basics/RealWorld.tsx
index 561a2d5911b3e4..5ec6acc11d851e 100644
--- a/docs/src/pages/system/basics/RealWorld.tsx
+++ b/docs/src/pages/system/basics/RealWorld.tsx
@@ -23,7 +23,7 @@ export default function RealWorld() {
             <Typography>You have lost connection to the internet. This app is offline.</Typography>
           </Grid>
         </Grid>
-        <Grid container justify="flex-end" spacing={1}>
+        <Grid container justifyContent="flex-end" spacing={1}>
           <Grid item>
             <Button color="primary">Turn on wifi</Button>
           </Grid>
diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts
index 191d1d8cfe7215..d04af19dbe35a3 100644
--- a/packages/material-ui/src/Grid/Grid.d.ts
+++ b/packages/material-ui/src/Grid/Grid.d.ts
@@ -47,11 +47,11 @@ export type GridClassKey =
   | 'align-content-xs-flex-end'
   | 'align-content-xs-space-between'
   | 'align-content-xs-space-around'
-  | 'justify-xs-center'
-  | 'justify-xs-flex-end'
-  | 'justify-xs-space-between'
-  | 'justify-xs-space-around'
-  | 'justify-xs-space-evenly'
+  | 'justify-content-xs-center'
+  | 'justify-content-xs-flex-end'
+  | 'justify-content-xs-space-between'
+  | 'justify-content-xs-space-around'
+  | 'justify-content-xs-space-evenly'
   | 'spacing-xs-1'
   | 'spacing-xs-2'
   | 'spacing-xs-3'
@@ -78,18 +78,88 @@ export type GridClassKey =
   | 'grid-xs-12';
 
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
-    Partial<Record<Breakpoint, boolean | GridSize>> & {
-      alignContent?: GridContentAlignment;
-      alignItems?: GridItemsAlignment;
-      container?: boolean;
-      direction?: GridDirection;
-      item?: boolean;
-      justify?: GridJustification;
-      spacing?: GridSpacing;
-      wrap?: GridWrap;
-      zeroMinWidth?: boolean;
-    };
+  props: P & {
+    /**
+     * Defines the `align-content` style property.
+     * It's applied for all screen sizes.
+     */
+    alignContent?: GridContentAlignment;
+    /**
+     * Defines the `align-items` style property.
+     * It's applied for all screen sizes.
+     */
+    alignItems?: GridItemsAlignment;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     */
+    direction?: GridDirection;
+    /**
+     * If `true`, the component will have the flex *item* behavior.
+     * You should be wrapping *items* with a *container*.
+     */
+    item?: boolean;
+    /**
+     * Defines the `justify-content` style property.
+     * It is applied for all screen sizes.
+     * @deprecated Use `justifyContent` instead, the prop was renamed
+     */
+    justify?: GridJustification;
+    /**
+     * Defines the `justify-content` style property.
+     * It is applied for all screen sizes.
+     */
+    justifyContent?: GridJustification;
+    /**
+     * Defines the number of grids the component is going to use.
+     * It's applied for the `lg` breakpoint and wider screens if not overridden.
+     */
+    lg?: boolean | GridSize;
+    /**
+     * Defines the number of grids the component is going to use.
+     * It's applied for the `md` breakpoint and wider screens if not overridden.
+     */
+    md?: boolean | GridSize;
+    /**
+     * Defines the number of grids the component is going to use.
+     * It's applied for the `sm` breakpoint and wider screens if not overridden.
+     */
+    sm?: boolean | GridSize;
+    /**
+     * Defines the space between the type `item` component.
+     * It can only be used on a type `container` component.
+     */
+    spacing?: GridSpacing;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     */
+    wrap?: GridWrap;
+    /**
+     * Defines the number of grids the component is going to use.
+     * It's applied for the `xl` breakpoint and wider screens.
+     */
+    xl?: boolean | GridSize;
+    /**
+     * Defines the number of grids the component is going to use.
+     * It's applied for all the screen sizes with the lowest priority.
+     */
+    xs?: boolean | GridSize;
+    /**
+     * If `true`, it sets `min-width: 0` on the item.
+     * Refer to the limitations section of the documentation to better understand the use case.
+     */
+    zeroMinWidth?: boolean;
+  };
   defaultComponent: D;
   classKey: GridClassKey;
 }
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index d40606c59f750c..ccb3d3868728a4 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import requirePropFactory from '../utils/requirePropFactory';
+import deprecatedPropType from '../utils/deprecatedPropType';
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -171,24 +172,24 @@ export const styles = (theme) => ({
   'align-content-xs-space-around': {
     alignContent: 'space-around',
   },
-  /* Styles applied to the root element if `justify="center"`. */
-  'justify-xs-center': {
+  /* Styles applied to the root element if `justifyContent="center"`. */
+  'justify-content-xs-center': {
     justifyContent: 'center',
   },
-  /* Styles applied to the root element if `justify="flex-end"`. */
-  'justify-xs-flex-end': {
+  /* Styles applied to the root element if `justifyContent="flex-end"`. */
+  'justify-content-xs-flex-end': {
     justifyContent: 'flex-end',
   },
-  /* Styles applied to the root element if `justify="space-between"`. */
-  'justify-xs-space-between': {
+  /* Styles applied to the root element if `justifyContent="space-between"`. */
+  'justify-content-xs-space-between': {
     justifyContent: 'space-between',
   },
-  /* Styles applied to the root element if `justify="space-around"`. */
-  'justify-xs-space-around': {
+  /* Styles applied to the root element if `justifyContent="space-around"`. */
+  'justify-content-xs-space-around': {
     justifyContent: 'space-around',
   },
-  /* Styles applied to the root element if `justify="space-evenly"`. */
-  'justify-xs-space-evenly': {
+  /* Styles applied to the root element if `justifyContent="space-evenly"`. */
+  'justify-content-xs-space-evenly': {
     justifyContent: 'space-evenly',
   },
   ...generateGutter(theme, 'xs'),
@@ -209,7 +210,8 @@ const Grid = React.forwardRef(function Grid(props, ref) {
     container = false,
     direction = 'row',
     item = false,
-    justify = 'flex-start',
+    justify,
+    justifyContent = 'flex-start',
     lg = false,
     md = false,
     sm = false,
@@ -232,7 +234,8 @@ const Grid = React.forwardRef(function Grid(props, ref) {
       [classes[`wrap-xs-${String(wrap)}`]]: wrap !== 'wrap',
       [classes[`align-items-xs-${String(alignItems)}`]]: alignItems !== 'stretch',
       [classes[`align-content-xs-${String(alignContent)}`]]: alignContent !== 'stretch',
-      [classes[`justify-xs-${String(justify)}`]]: justify !== 'flex-start',
+      [classes[`justify-content-xs-${String(justify || justifyContent)}`]]:
+        (justify || justifyContent) !== 'flex-start',
       [classes[`grid-xs-${String(xs)}`]]: xs !== false,
       [classes[`grid-sm-${String(sm)}`]]: sm !== false,
       [classes[`grid-md-${String(md)}`]]: md !== false,
@@ -299,9 +302,17 @@ Grid.propTypes = {
   /**
    * Defines the `justify-content` style property.
    * It is applied for all screen sizes.
+   * @deprecated Use `justifyContent` instead, the prop was renamed
    */
-  justify: PropTypes.oneOf([
-    'flex-start',
+  justify: deprecatedPropType(
+    PropTypes.oneOf(['center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),
+    'Use `justifyContent` instead, the prop was renamed.',
+  ),
+  /**
+   * Defines the `justify-content` style property.
+   * It is applied for all screen sizes.
+   */
+  justifyContent: PropTypes.oneOf([
     'center',
     'flex-end',
     'space-between',
@@ -359,7 +370,7 @@ if (process.env.NODE_ENV !== 'production') {
     alignContent: requireProp('container'),
     alignItems: requireProp('container'),
     direction: requireProp('container'),
-    justify: requireProp('container'),
+    justifyContent: requireProp('container'),
     lg: requireProp('item'),
     md: requireProp('item'),
     sm: requireProp('item'),
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js
index 25c66cdad083b9..2fd3cf4eae50df 100644
--- a/packages/material-ui/src/Grid/Grid.test.js
+++ b/packages/material-ui/src/Grid/Grid.test.js
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import PropTypes from 'prop-types';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { createShallow, getClasses } from 'test/utils';
 import createMount from 'test/utils/createMount';
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -76,10 +78,32 @@ describe('<Grid />', () => {
     });
   });
 
-  describe('prop: justify', () => {
-    it('should apply the justify class', () => {
-      const wrapper = shallow(<Grid justify="space-evenly" container />);
-      expect(wrapper.hasClass(classes['justify-xs-space-evenly'])).to.equal(true);
+  describe('v5 deprecations', () => {
+    beforeEach(() => {
+      PropTypes.resetWarningCache();
+      consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+    });
+
+    describe('prop: justify', () => {
+      it('should apply the justify-content class', () => {
+        const wrapper = shallow(<Grid justify="space-evenly" container />);
+        expect(wrapper.hasClass(classes['justify-content-xs-space-evenly'])).to.equal(true);
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.contain(
+          'The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead',
+        );
+      });
+    });
+  });
+
+  describe('prop: justifyContent', () => {
+    it('should apply the justify-content class', () => {
+      const wrapper = shallow(<Grid justifyContent="space-evenly" container />);
+      expect(wrapper.hasClass(classes['justify-content-xs-space-evenly'])).to.equal(true);
     });
   });
 
diff --git a/test/regressions/tests/Grid/StressGrid.js b/test/regressions/tests/Grid/StressGrid.js
index 56fc62de71b583..09774a61c905a9 100644
--- a/test/regressions/tests/Grid/StressGrid.js
+++ b/test/regressions/tests/Grid/StressGrid.js
@@ -37,7 +37,7 @@ function StressGrid(props) {
             <Paper className={classes.paper}>last</Paper>
           </Grid>
         </Grid>
-        <Grid container item spacing={1} justify="space-between">
+        <Grid container item spacing={1} justifyContent="space-between">
           <Grid item xs={3}>
             <Paper className={classes.paper}>space</Paper>
           </Grid>
diff --git a/test/regressions/tests/Tooltip/PositionedTooltips.js b/test/regressions/tests/Tooltip/PositionedTooltips.js
index 7fd7256ef0b2d7..b11f3de01f0b65 100644
--- a/test/regressions/tests/Tooltip/PositionedTooltips.js
+++ b/test/regressions/tests/Tooltip/PositionedTooltips.js
@@ -18,7 +18,7 @@ function PositionedTooltips(props) {
   const { classes } = props;
   return (
     <div className={classes.root}>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip open arrow title="Add" placement="top-start">
             <Button className={classes.fab}>top-start</Button>
@@ -31,7 +31,7 @@ function PositionedTooltips(props) {
           </Tooltip>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Tooltip open arrow title="Add" placement="left-start">
             <Button className={classes.fab}>left-start</Button>
@@ -63,7 +63,7 @@ function PositionedTooltips(props) {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip open arrow title="Add" placement="bottom-start">
             <Button className={classes.fab}>bottom-start</Button>