diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.js b/docs/data/joy/components/tooltip/PositionedTooltips.js
index 1ef39f9dfe7b2b..d171e1372d02ed 100644
--- a/docs/data/joy/components/tooltip/PositionedTooltips.js
+++ b/docs/data/joy/components/tooltip/PositionedTooltips.js
@@ -33,22 +33,20 @@ export default function PositionedTooltips() {
             <Button variant="plain">left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Tooltip title="Add" placement="right-start">
               <Button variant="plain">right-start</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right">
               <Button variant="plain">right</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right-end">
               <Button variant="plain">right-end</Button>
             </Tooltip>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.tsx b/docs/data/joy/components/tooltip/PositionedTooltips.tsx
index 1ef39f9dfe7b2b..d171e1372d02ed 100644
--- a/docs/data/joy/components/tooltip/PositionedTooltips.tsx
+++ b/docs/data/joy/components/tooltip/PositionedTooltips.tsx
@@ -33,22 +33,20 @@ export default function PositionedTooltips() {
             <Button variant="plain">left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Tooltip title="Add" placement="right-start">
               <Button variant="plain">right-start</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right">
               <Button variant="plain">right</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right-end">
               <Button variant="plain">right-end</Button>
             </Tooltip>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/material/components/popper/PositionedPopper.js b/docs/data/material/components/popper/PositionedPopper.js
index c58dd0d6b511b9..73231d43df30dd 100644
--- a/docs/data/material/components/popper/PositionedPopper.js
+++ b/docs/data/material/components/popper/PositionedPopper.js
@@ -51,16 +51,14 @@ export default function PositionedPopper() {
           <br />
           <Button onClick={handleClick('left-end')}>left-end</Button>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Button onClick={handleClick('right-start')}>right-start</Button>
-          </Grid>
-          <Grid>
+
             <Button onClick={handleClick('right')}>right</Button>
-          </Grid>
-          <Grid>
+
             <Button onClick={handleClick('right-end')}>right-end</Button>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/docs/data/material/components/popper/PositionedPopper.tsx
index db8f008cb1c247..a5823bfa325da1 100644
--- a/docs/data/material/components/popper/PositionedPopper.tsx
+++ b/docs/data/material/components/popper/PositionedPopper.tsx
@@ -53,16 +53,14 @@ export default function PositionedPopper() {
           <br />
           <Button onClick={handleClick('left-end')}>left-end</Button>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Button onClick={handleClick('right-start')}>right-start</Button>
-          </Grid>
-          <Grid>
+
             <Button onClick={handleClick('right')}>right</Button>
-          </Grid>
-          <Grid>
+
             <Button onClick={handleClick('right-end')}>right-end</Button>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/material/components/tooltips/PositionedTooltips.js b/docs/data/material/components/tooltips/PositionedTooltips.js
index a56035b3e174bf..a06f347139670d 100644
--- a/docs/data/material/components/tooltips/PositionedTooltips.js
+++ b/docs/data/material/components/tooltips/PositionedTooltips.js
@@ -33,22 +33,20 @@ export default function PositionedTooltips() {
             <Button>left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Tooltip title="Add" placement="right-start">
               <Button>right-start</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right">
               <Button>right</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right-end">
               <Button>right-end</Button>
             </Tooltip>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/material/components/tooltips/PositionedTooltips.tsx b/docs/data/material/components/tooltips/PositionedTooltips.tsx
index a56035b3e174bf..a06f347139670d 100644
--- a/docs/data/material/components/tooltips/PositionedTooltips.tsx
+++ b/docs/data/material/components/tooltips/PositionedTooltips.tsx
@@ -33,22 +33,20 @@ export default function PositionedTooltips() {
             <Button>left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
-          <Grid>
+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
             <Tooltip title="Add" placement="right-start">
               <Button>right-start</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right">
               <Button>right</Button>
             </Tooltip>
-          </Grid>
-          <Grid>
+
             <Tooltip title="Add" placement="right-end">
               <Button>right-end</Button>
             </Tooltip>
-          </Grid>
+          </Box>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.js b/docs/data/material/components/transfer-list/SelectAllTransferList.js
index e1d54bda3edaba..a5086f255b8a7d 100644
--- a/docs/data/material/components/transfer-list/SelectAllTransferList.js
+++ b/docs/data/material/components/transfer-list/SelectAllTransferList.js
@@ -9,6 +9,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
 
 function not(a, b) {
   return a.filter((value) => !b.includes(value));
@@ -132,27 +133,29 @@ export default function SelectAllTransferList() {
     >
       <Grid>{customList('Choices', left)}</Grid>
       <Grid>
-        <Grid container direction="column" sx={{ alignItems: 'center' }}>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right"
-          >
-            &gt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left"
-          >
-            &lt;
-          </Button>
+        <Grid container sx={{ alignItems: 'center' }}>
+          <Stack>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedRight}
+              disabled={leftChecked.length === 0}
+              aria-label="move selected right"
+            >
+              &gt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedLeft}
+              disabled={rightChecked.length === 0}
+              aria-label="move selected left"
+            >
+              &lt;
+            </Button>
+          </Stack>
         </Grid>
       </Grid>
       <Grid>{customList('Chosen', right)}</Grid>
diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx b/docs/data/material/components/transfer-list/SelectAllTransferList.tsx
index c4d486c6c5d3f1..c44dbe9dd9a6ca 100644
--- a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx
+++ b/docs/data/material/components/transfer-list/SelectAllTransferList.tsx
@@ -9,6 +9,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
 
 function not(a: readonly number[], b: readonly number[]) {
   return a.filter((value) => !b.includes(value));
@@ -133,27 +134,29 @@ export default function SelectAllTransferList() {
     >
       <Grid>{customList('Choices', left)}</Grid>
       <Grid>
-        <Grid container direction="column" sx={{ alignItems: 'center' }}>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right"
-          >
-            &gt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left"
-          >
-            &lt;
-          </Button>
+        <Grid container sx={{ alignItems: 'center' }}>
+          <Stack>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedRight}
+              disabled={leftChecked.length === 0}
+              aria-label="move selected right"
+            >
+              &gt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedLeft}
+              disabled={rightChecked.length === 0}
+              aria-label="move selected left"
+            >
+              &lt;
+            </Button>
+          </Stack>
         </Grid>
       </Grid>
       <Grid>{customList('Chosen', right)}</Grid>
diff --git a/docs/data/material/components/transfer-list/TransferList.js b/docs/data/material/components/transfer-list/TransferList.js
index 85fe352bec33fb..5da01a0ccc6c0c 100644
--- a/docs/data/material/components/transfer-list/TransferList.js
+++ b/docs/data/material/components/transfer-list/TransferList.js
@@ -7,6 +7,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 
 function not(a, b) {
   return a.filter((value) => !b.includes(value));
@@ -97,47 +98,49 @@ export default function TransferList() {
     >
       <Grid>{customList(left)}</Grid>
       <Grid>
-        <Grid container direction="column" sx={{ alignItems: 'center' }}>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleAllRight}
-            disabled={left.length === 0}
-            aria-label="move all right"
-          >
-            ≫
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right"
-          >
-            &gt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left"
-          >
-            &lt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleAllLeft}
-            disabled={right.length === 0}
-            aria-label="move all left"
-          >
-            ≪
-          </Button>
+        <Grid container sx={{ alignItems: 'center' }}>
+          <Stack>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleAllRight}
+              disabled={left.length === 0}
+              aria-label="move all right"
+            >
+              ≫
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedRight}
+              disabled={leftChecked.length === 0}
+              aria-label="move selected right"
+            >
+              &gt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedLeft}
+              disabled={rightChecked.length === 0}
+              aria-label="move selected left"
+            >
+              &lt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleAllLeft}
+              disabled={right.length === 0}
+              aria-label="move all left"
+            >
+              ≪
+            </Button>
+          </Stack>
         </Grid>
       </Grid>
       <Grid>{customList(right)}</Grid>
diff --git a/docs/data/material/components/transfer-list/TransferList.tsx b/docs/data/material/components/transfer-list/TransferList.tsx
index 042020d3df7ed9..1d391e7581646a 100644
--- a/docs/data/material/components/transfer-list/TransferList.tsx
+++ b/docs/data/material/components/transfer-list/TransferList.tsx
@@ -7,6 +7,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 
 function not(a: readonly number[], b: readonly number[]) {
   return a.filter((value) => !b.includes(value));
@@ -97,47 +98,49 @@ export default function TransferList() {
     >
       <Grid>{customList(left)}</Grid>
       <Grid>
-        <Grid container direction="column" sx={{ alignItems: 'center' }}>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleAllRight}
-            disabled={left.length === 0}
-            aria-label="move all right"
-          >
-            ≫
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right"
-          >
-            &gt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left"
-          >
-            &lt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleAllLeft}
-            disabled={right.length === 0}
-            aria-label="move all left"
-          >
-            ≪
-          </Button>
+        <Grid container sx={{ alignItems: 'center' }}>
+          <Stack>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleAllRight}
+              disabled={left.length === 0}
+              aria-label="move all right"
+            >
+              ≫
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedRight}
+              disabled={leftChecked.length === 0}
+              aria-label="move selected right"
+            >
+              &gt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleCheckedLeft}
+              disabled={rightChecked.length === 0}
+              aria-label="move selected left"
+            >
+              &lt;
+            </Button>
+            <Button
+              sx={{ my: 0.5 }}
+              variant="outlined"
+              size="small"
+              onClick={handleAllLeft}
+              disabled={right.length === 0}
+              aria-label="move all left"
+            >
+              ≪
+            </Button>
+          </Stack>
         </Grid>
       </Grid>
       <Grid>{customList(right)}</Grid>
diff --git a/docs/pages/material-ui/api/grid.json b/docs/pages/material-ui/api/grid.json
index 9459b0453fa54e..c234dd670673e3 100644
--- a/docs/pages/material-ui/api/grid.json
+++ b/docs/pages/material-ui/api/grid.json
@@ -18,7 +18,7 @@
     "direction": {
       "type": {
         "name": "union",
-        "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
+        "description": "'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
       },
       "default": "'row'"
     },
diff --git a/docs/pages/material-ui/api/pigment-grid.json b/docs/pages/material-ui/api/pigment-grid.json
index 381d98a646c4a4..5e52d8e655139c 100644
--- a/docs/pages/material-ui/api/pigment-grid.json
+++ b/docs/pages/material-ui/api/pigment-grid.json
@@ -18,7 +18,7 @@
     "direction": {
       "type": {
         "name": "union",
-        "description": "'column'<br>&#124;&nbsp;'column-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;Array&lt;'column'<br>&#124;&nbsp;'column-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;'row-reverse'&gt;<br>&#124;&nbsp;object"
+        "description": "'row'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;Array&lt;'row'<br>&#124;&nbsp;'row-reverse'&gt;<br>&#124;&nbsp;object"
       },
       "default": "'row'"
     },
diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json
index 4cd038309b7d7b..16e24a7434c3da 100644
--- a/docs/pages/system/api/grid.json
+++ b/docs/pages/system/api/grid.json
@@ -18,7 +18,7 @@
     "direction": {
       "type": {
         "name": "union",
-        "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
+        "description": "'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
       },
       "default": "'row'"
     },
diff --git a/docs/translations/api-docs/grid/grid.json b/docs/translations/api-docs/grid/grid.json
index 284d73c71a45f1..e48e42a341d106 100644
--- a/docs/translations/api-docs/grid/grid.json
+++ b/docs/translations/api-docs/grid/grid.json
@@ -10,7 +10,7 @@
       "description": "If <code>true</code>, the component will have the flex <em>container</em> behavior. You should be wrapping <em>items</em> with a <em>container</em>."
     },
     "direction": {
-      "description": "Defines the <code>flex-direction</code> style property. It is applied for all screen sizes."
+      "description": "Defines the <code>flex-direction</code> style property for the container.<br>⚠️ Only <code>row</code> and <code>row-reverse</code> are supported. <code>column</code> and <code>column-reverse</code> are not supported, because the Grid component is designed to subdivide layouts into <strong>columns</strong>, not rows.<br>For vertical layouts, use <code>Stack</code> instead."
     },
     "offset": {
       "description": "Defines the offset value for the type <code>item</code> components."
diff --git a/packages/mui-material/src/Grid/Grid.tsx b/packages/mui-material/src/Grid/Grid.tsx
index 82f026147cb593..4a960c5454d53d 100644
--- a/packages/mui-material/src/Grid/Grid.tsx
+++ b/packages/mui-material/src/Grid/Grid.tsx
@@ -10,7 +10,7 @@ import useTheme from '../styles/useTheme';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 
 export type GridSpacing = number | string;
 
@@ -42,8 +42,13 @@ export interface GridBaseProps {
    */
   container?: boolean;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection>;
@@ -173,13 +178,18 @@ Grid.propTypes /* remove-proptypes */ = {
    */
   container: PropTypes.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
-    PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+    PropTypes.oneOf(['row-reverse', 'row']),
+    PropTypes.arrayOf(PropTypes.oneOf(['row-reverse', 'row'])),
     PropTypes.object,
   ]),
   /**
diff --git a/packages/mui-material/src/Grid/gridClasses.ts b/packages/mui-material/src/Grid/gridClasses.ts
index d6e72ce39544c7..6d4ec112325cf9 100644
--- a/packages/mui-material/src/Grid/gridClasses.ts
+++ b/packages/mui-material/src/Grid/gridClasses.ts
@@ -15,7 +15,7 @@ export function getGridUtilityClass(slot: string): string {
 }
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
-const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
+const DIRECTIONS = ['row-reverse', 'row'] as const;
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
 
diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
index 8d1cde0e06e8fe..a53e8c5afe3c3a 100644
--- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
+++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
@@ -16,7 +16,7 @@ import { Breakpoint, Theme } from '../styles';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 
 export type GridSpacing = number | string;
 
@@ -180,8 +180,8 @@ PigmentGrid.propTypes /* remove-proptypes */ = {
    * @default 'row'
    */
   direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
-    PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
+    PropTypes.oneOf(['row', 'row-reverse']),
+    PropTypes.arrayOf(PropTypes.oneOf(['row', 'row-reverse'])),
     PropTypes.object,
   ]),
   /**
diff --git a/packages/mui-system/src/Grid/Grid.tsx b/packages/mui-system/src/Grid/Grid.tsx
index 4e708392ba88df..9aa41b2611097e 100644
--- a/packages/mui-system/src/Grid/Grid.tsx
+++ b/packages/mui-system/src/Grid/Grid.tsx
@@ -49,13 +49,18 @@ Grid.propTypes /* remove-proptypes */ = {
    */
   container: PropTypes.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
-    PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+    PropTypes.oneOf(['row-reverse', 'row']),
+    PropTypes.arrayOf(PropTypes.oneOf(['row-reverse', 'row'])),
     PropTypes.object,
   ]),
   /**
diff --git a/packages/mui-system/src/Grid/GridProps.ts b/packages/mui-system/src/Grid/GridProps.ts
index 3886e6b39db2ec..6dff68d3423a88 100644
--- a/packages/mui-system/src/Grid/GridProps.ts
+++ b/packages/mui-system/src/Grid/GridProps.ts
@@ -6,7 +6,7 @@ import { SystemProps } from '../Box';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 
 export type GridSpacing = number | string;
 
@@ -38,8 +38,13 @@ export interface GridBaseProps {
    */
   container?: boolean;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection>;