[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564

sai6855 · 2026-01-06T06:49:33Z

According to https://mui.com/material-ui/react-grid/#column-direction, direction prop doesn't support column and column-reverse but api-docs page listed them as valid . This PR fixes discrepancy

preview: https://deploy-preview-47564--material-ui.netlify.app/material-ui/api/grid/

…n type

mui-bot · 2026-01-06T06:50:59Z

Netlify deploy preview

https://deploy-preview-47564--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	▼-26B^(-0.01%)	0B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c75bef7

Copilot

Pull request overview

This PR removes 'column' and 'column-reverse' options from the GridDirection type definition, limiting it to only 'row' and 'row-reverse' values.

Changes the exported GridDirection type to exclude column-based flex-direction values
Represents a breaking change to the Grid component's TypeScript API

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-06T06:54:10Z

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

 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';


This is a breaking API change that removes valid CSS flex-direction values ('column' and 'column-reverse') from the GridDirection type. This will cause TypeScript compilation errors for any existing code using these direction values. If this is intentional, it should be:

Documented as a breaking change

Include a migration guide explaining why these values are being removed and what alternatives users should use

Consider deprecating these values first in a minor release before removing them in a major version

If there's a technical reason why column directions shouldn't be supported in Grid, that rationale should be documented.

Suggested change

export type GridDirection = 'row' | 'row-reverse';

export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

Copilot · 2026-01-06T06:54:11Z

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

 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';


The GridDirection type is being updated to remove 'column' and 'column-reverse' values, but this change is incomplete. Several other parts of the codebase still reference these values and need to be updated:

PropTypes validation (lines 181-182 in this file) still accepts 'column' and 'column-reverse'

The DIRECTIONS constant in gridClasses.ts (line 18) still includes all four values

The underlying @mui/system/Grid/GridProps.ts still defines GridDirection with all four values

PigmentGrid also has the full set of direction values

This incomplete change will cause inconsistencies between TypeScript type checking and runtime behavior, and may break applications that use column directions. Consider either completing all related changes together or reverting this change until a comprehensive update can be made.

Suggested change

export type GridDirection = 'row' | 'row-reverse';

export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

Removed 👍

…nto grid-props

ZeeshanTamboli

@sai6855 As stated by Co-pilot in this comment, I think you need to remove from gridClasses and MUI System GridProps as well.

…nto grid-props

ZeeshanTamboli

The layout is broken in:

sai6855 · 2026-01-12T10:53:58Z

The layout is broken in:

https://deploy-preview-47564--material-ui.netlify.app/material-ui/react-popper/

https://deploy-preview-47564--material-ui.netlify.app/material-ui/react-tooltip/#positioned-tooltips

it's fixed can you check now, Since argos didn't reported any errors i thought demos were functional

ZeeshanTamboli

I think we need to update the docs here https://deploy-preview-47564--material-ui.netlify.app/material-ui/api/grid/#grid-prop-direction.

It says flex-direction, but now it doesn't include column and column-reverse. We can update it to:

/**
 * 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` (optionally inside a Grid item).
 *
 * @default 'row'
 */

ZeeshanTamboli · 2026-01-13T06:14:10Z

@sai6855 If it looks good, you can merge this.

sai6855 · 2026-01-13T09:36:11Z

@sai6855 If it looks good, you can merge this.

Since this has critical changes, i requested additional review from @siriwatknp to avoid regressions

siriwatknp

please check my comments

siriwatknp · 2026-01-13T11:07:37Z

docs/data/joy/components/tooltip/PositionedTooltips.js

+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Stack sx={{ alignItems: 'end' }}>
+            <Grid>
+              <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>
+          </Stack>


This is strange. It looks misuse to me, I think better to change entirely to Stack or Box with sx prop.

siriwatknp · 2026-01-13T11:08:42Z

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

+-  PaperComponent={CustomPaperComponent}
+-  PopperComponent={CustomPopperComponent}
+-  ListboxComponent={CustomListboxComponent}
+  slots={{
+    paper: CustomPaperComponent,
+    popper: CustomPopperComponent,
+  }}
+  slotProps={{
+    listbox: {
+      component: CustomListboxComponent,
+    },
+  }}


this file is not related to the PR.

siriwatknp · 2026-01-13T11:10:23Z

docs/translations/api-docs/grid/grid.json

    },
    "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> (optionally inside a Grid item)."


Suggested change

"description": "Defines the <code>flex-direction</code> style property for the container. ⚠️ 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 columns, not rows. For vertical layouts, use <code>Stack</code> (optionally inside a Grid item)."

"description": "Defines the <code>flex-direction</code> style property for the container. ⚠️ 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 columns, not rows. For vertical layouts, use <code>Stack</code> instead."

I think we should not tell users to mix the Grid and Stack together. They serve a different purpose for creating layout.

Just to be clear, I meant using Stack as a child of Grid container is misuse but this demo is fine:
https://mui.com/material-ui/react-grid/#column-direction

…nto grid-props

sai6855 · 2026-01-20T06:55:03Z

please check my comments

@siriwatknp applied suggestion as per your review, can you re-check?

[grid] Remove 'column' and 'column-reverse' options from GridDirectio…

d8facfa

…n type

Copilot AI review requested due to automatic review settings January 6, 2026 06:49

Copilot started reviewing on behalf of sai6855 January 6, 2026 06:50 View session

sai6855 changed the title ~~[grid] Remove 'column' and 'column-reverse' options from GridDirectio…~~ [grid] Remove 'column' and 'column-reverse' options from GridDirection type Jan 6, 2026

sai6855 added type: bug It doesn't behave as expected. docs Improvements or additions to the documentation. component: Grid The React component. labels Jan 6, 2026

Copilot AI reviewed Jan 6, 2026

View reviewed changes

sai6855 added 8 commits January 6, 2026 12:30

fix ts issues

fed32f6

fix demos

66267f2

fix

a0d56e8

reigger

6d8dfcf

docs-format

589823a

fix

f79817e

fix

62d5051

fix docs:api

44f67c8

sai6855 requested a review from siriwatknp January 6, 2026 09:57

sai6855 and others added 5 commits January 6, 2026 15:51

Merge branch 'master' into grid-props

da86194

trigger

54d9156

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

a9fa9ed

…nto grid-props

trigger-ci

16460d9

[docs] Fix incorrect indentation in migration guide

f7c8123

ZeeshanTamboli reviewed Jan 7, 2026

View reviewed changes

sai6855 added 3 commits January 12, 2026 11:44

remove direction from grid classes and gridprops

c03dd6d

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

cce38b9

…nto grid-props

fix ogment

873d853

sai6855 requested a review from ZeeshanTamboli January 12, 2026 06:41

ZeeshanTamboli reviewed Jan 12, 2026

View reviewed changes

fix demos

56259a7

ZeeshanTamboli reviewed Jan 12, 2026

View reviewed changes

update descriptions

c3e56f2

ZeeshanTamboli approved these changes Jan 12, 2026

View reviewed changes

siriwatknp reviewed Jan 16, 2026

View reviewed changes

sai6855 and others added 9 commits January 16, 2026 12:39

Merge branch 'master' into grid-props

be6b0d4

jun review

507f382

update docs

094b865

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

21c4b5a

…nto grid-props

FIX

91b76d2

fix

e32eb26

fix

57cc3be

Merge branch 'master' into grid-props

2b8d18c

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

c75bef7

…nto grid-props

	export type GridDirection = 'row' \| 'row-reverse';
	export type GridDirection = 'row' \| 'row-reverse' \| 'column' \| 'column-reverse';

Uh oh!

[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564

Are you sure you want to change the base?

[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564

Uh oh!

Conversation

sai6855 commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

sai6855 Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Jan 12, 2026

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli commented Jan 13, 2026

Uh oh!

sai6855 commented Jan 13, 2026

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sai6855 commented Jan 6, 2026 •

edited

Loading

mui-bot commented Jan 6, 2026 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading