diff --git a/benchmark/browser/scenarios/grid-system/index.js b/benchmark/browser/scenarios/grid-system/index.js
index c0c0506cd9d69c..cead80916b8af3 100644
--- a/benchmark/browser/scenarios/grid-system/index.js
+++ b/benchmark/browser/scenarios/grid-system/index.js
@@ -5,9 +5,7 @@ export default function GridSystem() {
return (
{new Array(1000).fill().map(() => (
-
- test case
-
+ test case
))}
);
diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.js b/docs/data/joy/components/aspect-ratio/VariantsRatio.js
index 595a48c65270bf..6ef90149ef3274 100644
--- a/docs/data/joy/components/aspect-ratio/VariantsRatio.js
+++ b/docs/data/joy/components/aspect-ratio/VariantsRatio.js
@@ -6,28 +6,28 @@ import Typography from '@mui/joy/Typography';
export default function VariantsRatio() {
return (
-
+
Solid
-
+
Soft
-
+
Outlined
-
+
Plain
diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx b/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
index 595a48c65270bf..6ef90149ef3274 100644
--- a/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
+++ b/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
@@ -6,28 +6,28 @@ import Typography from '@mui/joy/Typography';
export default function VariantsRatio() {
return (
-
+
Solid
-
+
Soft
-
+
Outlined
-
+
Plain
diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js
index b1ccef8819a661..a889d3eea7556e 100644
--- a/docs/data/joy/components/grid/AutoGrid.js
+++ b/docs/data/joy/components/grid/AutoGrid.js
@@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function AutoGrid() {
return (
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
);
diff --git a/docs/data/joy/components/grid/AutoGrid.tsx b/docs/data/joy/components/grid/AutoGrid.tsx
index b1ccef8819a661..a889d3eea7556e 100644
--- a/docs/data/joy/components/grid/AutoGrid.tsx
+++ b/docs/data/joy/components/grid/AutoGrid.tsx
@@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function AutoGrid() {
return (
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
);
diff --git a/docs/data/joy/components/grid/AutoGrid.tsx.preview b/docs/data/joy/components/grid/AutoGrid.tsx.preview
index 712fc60e7985e3..6659ec7ba99118 100644
--- a/docs/data/joy/components/grid/AutoGrid.tsx.preview
+++ b/docs/data/joy/components/grid/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/BasicGrid.js b/docs/data/joy/components/grid/BasicGrid.js
index 4ab843fdd64cf4..0a1c0542411ab5 100644
--- a/docs/data/joy/components/grid/BasicGrid.js
+++ b/docs/data/joy/components/grid/BasicGrid.js
@@ -18,17 +18,17 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function BasicGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
);
diff --git a/docs/data/joy/components/grid/BasicGrid.tsx b/docs/data/joy/components/grid/BasicGrid.tsx
index 4ab843fdd64cf4..0a1c0542411ab5 100644
--- a/docs/data/joy/components/grid/BasicGrid.tsx
+++ b/docs/data/joy/components/grid/BasicGrid.tsx
@@ -18,17 +18,17 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function BasicGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
);
diff --git a/docs/data/joy/components/grid/BasicGrid.tsx.preview b/docs/data/joy/components/grid/BasicGrid.tsx.preview
index c068f77d0503d4..162fd81bb8ac5b 100644
--- a/docs/data/joy/components/grid/BasicGrid.tsx.preview
+++ b/docs/data/joy/components/grid/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/CSSGrid.js b/docs/data/joy/components/grid/CSSGrid.js
index 5a40e82099038b..ddee500a868fbc 100644
--- a/docs/data/joy/components/grid/CSSGrid.js
+++ b/docs/data/joy/components/grid/CSSGrid.js
@@ -20,16 +20,16 @@ export default function CSSGrid() {
- - xs=8
+ - size=8
- - xs=4
+ - size=4
- - xs=4
+ - size=4
- - xs=8
+ - size=8
diff --git a/docs/data/joy/components/grid/CSSGrid.tsx b/docs/data/joy/components/grid/CSSGrid.tsx
index 5a40e82099038b..ddee500a868fbc 100644
--- a/docs/data/joy/components/grid/CSSGrid.tsx
+++ b/docs/data/joy/components/grid/CSSGrid.tsx
@@ -20,16 +20,16 @@ export default function CSSGrid() {
- - xs=8
+ - size=8
- - xs=4
+ - size=4
- - xs=4
+ - size=4
- - xs=8
+ - size=8
diff --git a/docs/data/joy/components/grid/CSSGrid.tsx.preview b/docs/data/joy/components/grid/CSSGrid.tsx.preview
index e0a55118f7e4e4..0911896c8ed831 100644
--- a/docs/data/joy/components/grid/CSSGrid.tsx.preview
+++ b/docs/data/joy/components/grid/CSSGrid.tsx.preview
@@ -1,14 +1,14 @@
- - xs=8
+ - size=8
- - xs=4
+ - size=4
- - xs=4
+ - size=4
- - xs=8
+ - size=8
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/ChildrenCenteredGrid.js b/docs/data/joy/components/grid/ChildrenCenteredGrid.js
index 74a9b4fef0a611..46656dc746ba3e 100644
--- a/docs/data/joy/components/grid/ChildrenCenteredGrid.js
+++ b/docs/data/joy/components/grid/ChildrenCenteredGrid.js
@@ -24,15 +24,13 @@ export default function ChildrenCenteredGrid() {
{['Jimmy', 'Michal', 'Jun', 'Marija'].map((name, index) => (
{name}
diff --git a/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx b/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx
index 74a9b4fef0a611..46656dc746ba3e 100644
--- a/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx
+++ b/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx
@@ -24,15 +24,13 @@ export default function ChildrenCenteredGrid() {
{['Jimmy', 'Michal', 'Jun', 'Marija'].map((name, index) => (
{name}
diff --git a/docs/data/joy/components/grid/ColumnsGrid.js b/docs/data/joy/components/grid/ColumnsGrid.js
index 6175eaa17cbc0f..53b29dbd53a485 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.js
+++ b/docs/data/joy/components/grid/ColumnsGrid.js
@@ -18,11 +18,11 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
);
diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx b/docs/data/joy/components/grid/ColumnsGrid.tsx
index 6175eaa17cbc0f..53b29dbd53a485 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.tsx
+++ b/docs/data/joy/components/grid/ColumnsGrid.tsx
@@ -18,11 +18,11 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
);
diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx.preview b/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
index bf3539f8b90a8e..bcc4b8aedb471d 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
+++ b/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/FullWidthGrid.js b/docs/data/joy/components/grid/FullWidthGrid.js
index f6cd1a481d6747..6b45cb80f4c4af 100644
--- a/docs/data/joy/components/grid/FullWidthGrid.js
+++ b/docs/data/joy/components/grid/FullWidthGrid.js
@@ -18,16 +18,16 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/joy/components/grid/FullWidthGrid.tsx b/docs/data/joy/components/grid/FullWidthGrid.tsx
index f6cd1a481d6747..6b45cb80f4c4af 100644
--- a/docs/data/joy/components/grid/FullWidthGrid.tsx
+++ b/docs/data/joy/components/grid/FullWidthGrid.tsx
@@ -18,16 +18,16 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/joy/components/grid/FullWidthGrid.tsx.preview b/docs/data/joy/components/grid/FullWidthGrid.tsx.preview
index e3cac4aad83f04..a6d886bab7066e 100644
--- a/docs/data/joy/components/grid/FullWidthGrid.tsx.preview
+++ b/docs/data/joy/components/grid/FullWidthGrid.tsx.preview
@@ -1,14 +1,14 @@
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/InteractiveGrid.js b/docs/data/joy/components/grid/InteractiveGrid.js
index 3a6425ffc583fe..d62eb4194d47d3 100644
--- a/docs/data/joy/components/grid/InteractiveGrid.js
+++ b/docs/data/joy/components/grid/InteractiveGrid.js
@@ -27,7 +27,7 @@ export default function InteractiveGrid() {
return (
-
+
-
+
-
+
direction
-
+
justifyContent
-
+
alignItems
-
+
diff --git a/docs/data/joy/components/grid/InteractiveGrid.tsx b/docs/data/joy/components/grid/InteractiveGrid.tsx
index 15017b27815699..325095d7f8fcc6 100644
--- a/docs/data/joy/components/grid/InteractiveGrid.tsx
+++ b/docs/data/joy/components/grid/InteractiveGrid.tsx
@@ -43,7 +43,7 @@ export default function InteractiveGrid() {
return (
-
+
-
+
-
+
direction
-
+
justifyContent
-
+
alignItems
-
+
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.js b/docs/data/joy/components/grid/ResponsiveGrid.js
index cd862ace452e12..f099db6c2d71d2 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.js
+++ b/docs/data/joy/components/grid/ResponsiveGrid.js
@@ -24,8 +24,8 @@ export default function ResponsiveGrid() {
sx={{ flexGrow: 1 }}
>
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx b/docs/data/joy/components/grid/ResponsiveGrid.tsx
index cd862ace452e12..f099db6c2d71d2 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.tsx
+++ b/docs/data/joy/components/grid/ResponsiveGrid.tsx
@@ -24,8 +24,8 @@ export default function ResponsiveGrid() {
sx={{ flexGrow: 1 }}
>
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview b/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
index c6395fe5ca4477..bf95bc84b701e1 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
+++ b/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
@@ -5,8 +5,8 @@
sx={{ flexGrow: 1 }}
>
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.js b/docs/data/joy/components/grid/RowAndColumnSpacing.js
index 435f775e4083e6..f8e21087b725e9 100644
--- a/docs/data/joy/components/grid/RowAndColumnSpacing.js
+++ b/docs/data/joy/components/grid/RowAndColumnSpacing.js
@@ -23,16 +23,16 @@ export default function RowAndColumnSpacing() {
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
sx={{ width: '100%' }}
>
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.tsx b/docs/data/joy/components/grid/RowAndColumnSpacing.tsx
index 435f775e4083e6..f8e21087b725e9 100644
--- a/docs/data/joy/components/grid/RowAndColumnSpacing.tsx
+++ b/docs/data/joy/components/grid/RowAndColumnSpacing.tsx
@@ -23,16 +23,16 @@ export default function RowAndColumnSpacing() {
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
sx={{ width: '100%' }}
>
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js
index b23970449d3e57..c14ee7ce14a707 100644
--- a/docs/data/joy/components/grid/SpacingGrid.js
+++ b/docs/data/joy/components/grid/SpacingGrid.js
@@ -21,7 +21,7 @@ export default function SpacingGrid() {
return (
-
+
{[0, 1, 2].map((value) => (
@@ -30,7 +30,7 @@ export default function SpacingGrid() {
))}
-
+
diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx
index 47f57585154596..e7c325d68bd22d 100644
--- a/docs/data/joy/components/grid/SpacingGrid.tsx
+++ b/docs/data/joy/components/grid/SpacingGrid.tsx
@@ -21,7 +21,7 @@ export default function SpacingGrid() {
return (
-
+
{[0, 1, 2].map((value) => (
@@ -30,7 +30,7 @@ export default function SpacingGrid() {
))}
-
+
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.js b/docs/data/joy/components/grid/VariableWidthGrid.js
index 659428350eb7e7..056245b0d95abf 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.js
+++ b/docs/data/joy/components/grid/VariableWidthGrid.js
@@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function VariableWidthGrid() {
return (
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
);
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx b/docs/data/joy/components/grid/VariableWidthGrid.tsx
index 659428350eb7e7..056245b0d95abf 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.tsx
+++ b/docs/data/joy/components/grid/VariableWidthGrid.tsx
@@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function VariableWidthGrid() {
return (
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
);
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview b/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
index 34fee62a643aed..b1fdd44a57b2e4 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
+++ b/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
@@ -1,11 +1,11 @@
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/grid.md b/docs/data/joy/components/grid/grid.md
index b8d64c71d8a5ed..9666ed5769ad3e 100644
--- a/docs/data/joy/components/grid/grid.md
+++ b/docs/data/joy/components/grid/grid.md
@@ -23,11 +23,8 @@ The `Grid` component shouldn't be confused with a data grid; it is closer to a l
import Grid from '@mui/joy/Grid';
```
-Column widths are integer values between 1 and 12. They apply at any breakpoint and indicate how many columns are occupied by the component.
-
-By default, the value given to a breakpoint is applied to all the other **wider** breakpoints.
-
-For example, `xs={12}` sizes a component to occupy the whole viewport width regardless of its size, even if you do not pass any value for wider breakpoints like `sm` or `md`.
+Column widths are integer values between 1 and 12.
+For example, an item with `size={6}` occupies half of the grid container's width.
{{"demo": "BasicGrid.js", "bg": true}}
@@ -37,7 +34,7 @@ For example, `xs={12}` sizes a component to occupy the whole viewport width rega
Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
-For example, `xs={12} sm={6}` sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.
+For example, `size={{ xs: 12, sm: 6 }}` sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.
{{"demo": "FullWidthGrid.js", "bg": true}}
@@ -64,11 +61,13 @@ You can switch the props' value based on the active breakpoint.
Responsive values is supported by:
+- `size`
- `columns`
- `columnSpacing`
- `direction`
- `rowSpacing`
- `spacing`
+- `offset`
- all the [other props](#system-props) of MUI System
:::warning
@@ -77,7 +76,7 @@ For instance, this is not working. The grid item misses the value for `md`:
```jsx
-
+
```
@@ -92,7 +91,7 @@ This also means that you can set the width of one grid item, and the others will
### Variable width content
-Set one of the size breakpoint props to `"auto"` instead of `true` or a `number` to render a column based on the natural width of its content.
+Set one of the size breakpoint props to `"auto"` to render a column based on the natural width of its content.
{{"demo": "VariableWidthGrid.js", "bg": true}}
@@ -128,7 +127,7 @@ The spacing between items is implemented with a negative margin. This might lead
### direction: column | column-reverse
-The `xs`, `sm`, `md`, `lg`, and `xl` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
+The `size` and `offset` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
They define the number of grids the component will use for a given breakpoint. They are intended to control **width** using `flex-basis` in `row` containers but they will impact height in `column` containers.
If used, these props may have undesirable effects on the height of the `Grid` item elements.
diff --git a/docs/data/joy/components/snackbar/PositionedSnackbar.js b/docs/data/joy/components/snackbar/PositionedSnackbar.js
index ee272b37adf561..abde01653071d3 100644
--- a/docs/data/joy/components/snackbar/PositionedSnackbar.js
+++ b/docs/data/joy/components/snackbar/PositionedSnackbar.js
@@ -39,7 +39,7 @@ export default function PositionedSnackbar() {
-
+
}
@@ -48,7 +48,7 @@ export default function PositionedSnackbar() {
Top Left
-
+
}
@@ -57,7 +57,7 @@ export default function PositionedSnackbar() {
Top Right
-
+
}
@@ -66,7 +66,7 @@ export default function PositionedSnackbar() {
Bottom Left
-
+
}
diff --git a/docs/data/joy/components/snackbar/PositionedSnackbar.tsx b/docs/data/joy/components/snackbar/PositionedSnackbar.tsx
index 7eed94c7d0178e..603e34924cd459 100644
--- a/docs/data/joy/components/snackbar/PositionedSnackbar.tsx
+++ b/docs/data/joy/components/snackbar/PositionedSnackbar.tsx
@@ -43,7 +43,7 @@ export default function PositionedSnackbar() {
-
+
}
@@ -52,7 +52,7 @@ export default function PositionedSnackbar() {
Top Left
-
+
}
@@ -61,7 +61,7 @@ export default function PositionedSnackbar() {
Top Right
-
+
}
@@ -70,7 +70,7 @@ export default function PositionedSnackbar() {
Bottom Left
-
+
}
diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js
index ce3f62d9417204..030e3fb959cb99 100644
--- a/docs/data/joy/components/stack/InteractiveStack.js
+++ b/docs/data/joy/components/stack/InteractiveStack.js
@@ -64,7 +64,7 @@ export default function InteractiveStack() {
})}
>
-
+
direction
-
+
alignItems
-
+
justifyContent
-
+
spacing
-
+
direction
-
+
alignItems
-
+
justifyContent
-
+
spacing
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx
index a757d2af3dfcce..ca9c7ec891ad18 100644
--- a/docs/data/material/components/grid2/AutoGrid.tsx
+++ b/docs/data/material/components/grid2/AutoGrid.tsx
@@ -19,14 +19,14 @@ export default function AutoGrid() {
return (
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx.preview b/docs/data/material/components/grid2/AutoGrid.tsx.preview
index 68576f9a5c08a6..422f5122eb59a6 100644
--- a/docs/data/material/components/grid2/AutoGrid.tsx.preview
+++ b/docs/data/material/components/grid2/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid2/BasicGrid.js
index a8b79541fe218b..86f550e3c5949c 100644
--- a/docs/data/material/components/grid2/BasicGrid.js
+++ b/docs/data/material/components/grid2/BasicGrid.js
@@ -19,17 +19,17 @@ export default function BasicGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx
index a8b79541fe218b..86f550e3c5949c 100644
--- a/docs/data/material/components/grid2/BasicGrid.tsx
+++ b/docs/data/material/components/grid2/BasicGrid.tsx
@@ -19,17 +19,17 @@ export default function BasicGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx.preview b/docs/data/material/components/grid2/BasicGrid.tsx.preview
index 643bd42f0f26a2..94df5430aefb49 100644
--- a/docs/data/material/components/grid2/BasicGrid.tsx.preview
+++ b/docs/data/material/components/grid2/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.js b/docs/data/material/components/grid2/CenteredElementGrid.js
index 605264af1a1425..bb53cea3e4d8ac 100644
--- a/docs/data/material/components/grid2/CenteredElementGrid.js
+++ b/docs/data/material/components/grid2/CenteredElementGrid.js
@@ -7,13 +7,13 @@ export default function CenteredElementGrid() {
return (
-
+
-
+
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx b/docs/data/material/components/grid2/CenteredElementGrid.tsx
index 605264af1a1425..bb53cea3e4d8ac 100644
--- a/docs/data/material/components/grid2/CenteredElementGrid.tsx
+++ b/docs/data/material/components/grid2/CenteredElementGrid.tsx
@@ -7,13 +7,13 @@ export default function CenteredElementGrid() {
return (
-
+
-
+
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview b/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview
index 494e43d6a06843..4ecb3d3772001f 100644
--- a/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview
+++ b/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview
@@ -1,11 +1,11 @@
-
+
-
+
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid2/ColumnsGrid.js
index 1fc91353ec2bbf..15ceb2c25893bd 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.js
+++ b/docs/data/material/components/grid2/ColumnsGrid.js
@@ -19,11 +19,11 @@ export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx
index 1fc91353ec2bbf..15ceb2c25893bd 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.tsx
+++ b/docs/data/material/components/grid2/ColumnsGrid.tsx
@@ -19,11 +19,11 @@ export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview b/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
index 753263d9d451b0..25d454075c6863 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
+++ b/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.js b/docs/data/material/components/grid2/FullBorderedGrid.js
index 65e0e8b2657e33..c586d97ee78659 100644
--- a/docs/data/material/components/grid2/FullBorderedGrid.js
+++ b/docs/data/material/components/grid2/FullBorderedGrid.js
@@ -20,7 +20,16 @@ export default function FullBorderedGrid() {
}}
>
{[...Array(6)].map((_, index) => (
-
+
))}
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.tsx b/docs/data/material/components/grid2/FullBorderedGrid.tsx
index 65e0e8b2657e33..c586d97ee78659 100644
--- a/docs/data/material/components/grid2/FullBorderedGrid.tsx
+++ b/docs/data/material/components/grid2/FullBorderedGrid.tsx
@@ -20,7 +20,16 @@ export default function FullBorderedGrid() {
}}
>
{[...Array(6)].map((_, index) => (
-
+
))}
diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid2/FullWidthGrid.js
index 07a03a642ec394..641c8eb56ca8f9 100644
--- a/docs/data/material/components/grid2/FullWidthGrid.js
+++ b/docs/data/material/components/grid2/FullWidthGrid.js
@@ -19,16 +19,16 @@ export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx b/docs/data/material/components/grid2/FullWidthGrid.tsx
index 07a03a642ec394..641c8eb56ca8f9 100644
--- a/docs/data/material/components/grid2/FullWidthGrid.tsx
+++ b/docs/data/material/components/grid2/FullWidthGrid.tsx
@@ -19,16 +19,16 @@ export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx.preview b/docs/data/material/components/grid2/FullWidthGrid.tsx.preview
index 9085084a78ddaa..255782d9b57349 100644
--- a/docs/data/material/components/grid2/FullWidthGrid.tsx.preview
+++ b/docs/data/material/components/grid2/FullWidthGrid.tsx.preview
@@ -1,14 +1,14 @@
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.js b/docs/data/material/components/grid2/HalfBorderedGrid.js
index d3097d80b5aab8..088e91fee523ed 100644
--- a/docs/data/material/components/grid2/HalfBorderedGrid.js
+++ b/docs/data/material/components/grid2/HalfBorderedGrid.js
@@ -31,7 +31,7 @@ export default function HalfBorderedGrid() {
})}
>
{[...Array(6)].map((_, index) => (
-
+
))}
diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.tsx b/docs/data/material/components/grid2/HalfBorderedGrid.tsx
index f81d4a505f5f9a..86559e7b7f2a07 100644
--- a/docs/data/material/components/grid2/HalfBorderedGrid.tsx
+++ b/docs/data/material/components/grid2/HalfBorderedGrid.tsx
@@ -31,7 +31,7 @@ export default function HalfBorderedGrid() {
})}
>
{[...Array(6)].map((_, index) => (
-
+
))}
diff --git a/docs/data/material/components/grid2/NestedGrid.js b/docs/data/material/components/grid2/NestedGrid.js
index 2710da64c39ba9..acde87b966314e 100644
--- a/docs/data/material/components/grid2/NestedGrid.js
+++ b/docs/data/material/components/grid2/NestedGrid.js
@@ -19,11 +19,11 @@ export default function NestedGrid() {
return (
-
+
- Email subscribe section
-
-
+
+
-
-
+
-
-
+
-
-
+
-
- © Copyright
diff --git a/docs/data/material/components/grid2/NestedGrid.tsx b/docs/data/material/components/grid2/NestedGrid.tsx
index 2710da64c39ba9..acde87b966314e 100644
--- a/docs/data/material/components/grid2/NestedGrid.tsx
+++ b/docs/data/material/components/grid2/NestedGrid.tsx
@@ -19,11 +19,11 @@ export default function NestedGrid() {
return (
-
+
- Email subscribe section
-
-
+
+
-
-
+
-
-
+
-
-
+
-
- © Copyright
diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid2/NestedGridColumns.js
index 408ef29cc5dcd1..6bbb985a425ba7 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.js
+++ b/docs/data/material/components/grid2/NestedGridColumns.js
@@ -19,26 +19,26 @@ export default function NestedGridColumns() {
return (
-
- - xs=8/24
+
+ - size=8/24
-
-
- - nested xs=12/24
+
+
+ - nested size=12/24
-
- - nested xs=12/24
+
+ - nested size=12/24
-
- - xs=8/24
+
+ - size=8/24
-
-
- - nested xs=6/12
+
+
+ - nested size=6/12
-
- - nested xs=6/12
+
+ - nested size=6/12
diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid2/NestedGridColumns.tsx
index 408ef29cc5dcd1..6bbb985a425ba7 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.tsx
+++ b/docs/data/material/components/grid2/NestedGridColumns.tsx
@@ -19,26 +19,26 @@ export default function NestedGridColumns() {
return (
-
- - xs=8/24
+
+ - size=8/24
-
-
- - nested xs=12/24
+
+
+ - nested size=12/24
-
- - nested xs=12/24
+
+ - nested size=12/24
-
- - xs=8/24
+
+ - size=8/24
-
-
- - nested xs=6/12
+
+
+ - nested size=6/12
-
- - nested xs=6/12
+
+ - nested size=6/12
diff --git a/docs/data/material/components/grid2/OffsetGrid.js b/docs/data/material/components/grid2/OffsetGrid.js
index 6876ba0cf174ac..93e52e754fd946 100644
--- a/docs/data/material/components/grid2/OffsetGrid.js
+++ b/docs/data/material/components/grid2/OffsetGrid.js
@@ -17,16 +17,16 @@ const Item = styled(Paper)(({ theme }) => ({
export default function OffsetGrid() {
return (
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx b/docs/data/material/components/grid2/OffsetGrid.tsx
index 6876ba0cf174ac..93e52e754fd946 100644
--- a/docs/data/material/components/grid2/OffsetGrid.tsx
+++ b/docs/data/material/components/grid2/OffsetGrid.tsx
@@ -17,16 +17,16 @@ const Item = styled(Paper)(({ theme }) => ({
export default function OffsetGrid() {
return (
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx.preview b/docs/data/material/components/grid2/OffsetGrid.tsx.preview
index e5510d70820bbc..946759cedfe43c 100644
--- a/docs/data/material/components/grid2/OffsetGrid.tsx.preview
+++ b/docs/data/material/components/grid2/OffsetGrid.tsx.preview
@@ -1,14 +1,14 @@
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid2/ResponsiveGrid.js
index 98ae33ddbe7223..e80fbbdee44bec 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.js
+++ b/docs/data/material/components/grid2/ResponsiveGrid.js
@@ -20,8 +20,8 @@ export default function ResponsiveGrid() {
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid2/ResponsiveGrid.tsx
index 98ae33ddbe7223..e80fbbdee44bec 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.tsx
+++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx
@@ -20,8 +20,8 @@ export default function ResponsiveGrid() {
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview b/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
index d2158e3aa363b4..b960ec563a5e61 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
+++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
@@ -1,7 +1,7 @@
{Array.from(Array(6)).map((_, index) => (
-
- - xs=2
+
+ - {index + 1}
))}
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.js b/docs/data/material/components/grid2/RowAndColumnSpacing.js
index 6d3e8e2265cb2a..60432628c330f7 100644
--- a/docs/data/material/components/grid2/RowAndColumnSpacing.js
+++ b/docs/data/material/components/grid2/RowAndColumnSpacing.js
@@ -19,16 +19,16 @@ export default function RowAndColumnSpacing() {
return (
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
index 6d3e8e2265cb2a..60432628c330f7 100644
--- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
+++ b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
@@ -19,16 +19,16 @@ export default function RowAndColumnSpacing() {
return (
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview
index 39811a41b91277..83d7265a44d051 100644
--- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview
+++ b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview
@@ -1,14 +1,14 @@
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.js b/docs/data/material/components/grid2/VariableWidthGrid.js
index 410336f9138a24..669561ef0eff1b 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.js
+++ b/docs/data/material/components/grid2/VariableWidthGrid.js
@@ -19,14 +19,14 @@ export default function VariableWidthGrid() {
return (
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid2/VariableWidthGrid.tsx
index 410336f9138a24..669561ef0eff1b 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.tsx
+++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx
@@ -19,14 +19,14 @@ export default function VariableWidthGrid() {
return (
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
index b10f779f363ab7..e88443265d2ec0 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
+++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
@@ -1,11 +1,11 @@
-
- - variable width content
+
+ - size=auto
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md
index 8159a29db601b1..17bcb35625dcc4 100644
--- a/docs/data/material/components/grid2/grid2.md
+++ b/docs/data/material/components/grid2/grid2.md
@@ -66,18 +66,16 @@ In order to create a grid layout, you need a container.
Use the `container` prop to create a grid container that wraps the grid items (the `Grid` is always an item).
Column widths are integer values between 1 and 12.
-They can be applied at any breakpoint to indicate how many columns are occupied by the component.
-
-A value given to a breakpoint applies to all the other wider breakpoints unless overridden—see [Multiple breakpoints](#multiple-breakpoints) for details.
-For example, a component with `xs={12}` occupies the whole viewport width regardless of its size.
+For example, an item with `size={6}` occupies half of the grid container's width.
{{"demo": "BasicGrid.js", "bg": true}}
### Multiple breakpoints
-Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
+Items may have multiple widths defined, causing the layout to change at the defined breakpoint.
+Width values apply to all wider breakpoints, and larger breakpoints override those given to smaller breakpoints.
-For example, a component with `xs={12} sm={6}` occupies the entire viewport width when the viewport is [less than 600 pixels wide](/material-ui/customization/breakpoints/#default-breakpoints).
+For example, a component with `size={{ xs: 12, sm: 6 }}` occupies the entire viewport width when the viewport is [less than 600 pixels wide](/material-ui/customization/breakpoints/#default-breakpoints).
When the viewport grows beyond this size, the component occupies half of the total width—six columns rather than 12.
{{"demo": "FullWidthGrid.js", "bg": true}}
@@ -108,11 +106,13 @@ For instance, we can implement Material Design's [recommended](https://m2.materi
Responsive values are supported by:
+- `size`
- `columns`
- `columnSpacing`
- `direction`
- `rowSpacing`
- `spacing`
+- `offset`
## Auto-layout
@@ -123,7 +123,7 @@ When you set the width of one item, the others will automatically resize to matc
### Variable width content
-When a breakpoint's value is given as `"auto"` instead of `true` or a number, then a column's size will automatically adjust to match the width of its content.
+When a breakpoint's value is given as `"auto"`, then a column's size will automatically adjust to match the width of its content.
The demo below shows how this works:
{{"demo": "VariableWidthGrid.js", "bg": true}}
@@ -166,10 +166,10 @@ Use the `columns` prop to change the default number of columns (12) in the grid,
## Offset
-Offset props (such as `smOffset`, `mdOffset`) push an item to the right side of the grid.
-These props accept:
+The `offset` prop pushes an item to the right side of the grid.
+This props accepts:
-- numbers—for example, `mdOffset={2}` pushes an item two columns to the right when the viewport size is equal to or greater than the `md` breakpoint.
+- numbers—for example, `offset={{ md: 2 }}` pushes an item two columns to the right when the viewport size is equal to or greater than the `md` breakpoint.
- `"auto"`—this pushes the item to the far right side of the grid container.
The demo below illustrates how to use the offset props:
@@ -199,7 +199,7 @@ function Demo() {
>
{Array.from(Array(4)).map((_, index) => (
-
+
{index + 1}
))}
@@ -210,19 +210,12 @@ function Demo() {
```
:::info
-Custom breakpoints affect both size and offset props:
-
-```diff
--
-+
-```
-
+Custom breakpoints affect all [responsive values](#responsive-values).
:::
### TypeScript
You have to set module augmentation on the theme breakpoints interface.
-Properties set to `true` will appear as `{key}`(size prop) and `{key}Offset`(offset prop).
```ts
declare module '@mui/system' {
@@ -268,7 +261,7 @@ It cannot wrap other elements.
### Column direction and reversing
-The column width (`xs`, ..., `xl`) and offset props are _not_ supported within containers that use `direction="column"` or `direction="column-reverse"`.
+The `size` and `offset` props are _not_ supported within containers that use `direction="column"` or `direction="column-reverse"`.
Size and offset props define the number of columns the component will use for a given breakpoint.
They are intended to control the width using `flex-basis` in `row` containers, but they will impact the height in `column` containers.
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
index c8dff43ecd2e8e..bf5a89b69e45d8 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
@@ -46,11 +46,11 @@ export default function MainGrid() {
{/* cards */}
{data.map((card, index) => (
-
+
))}
-
+
@@ -60,14 +60,14 @@ export default function MainGrid() {
direction={{ xs: 'row-reverse', md: 'row' }}
columns={12}
>
-
+
-
+
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
index 3e328359b0b6aa..960e7ac5613dfa 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
@@ -46,11 +46,11 @@ export default function MainGrid() {
{/* cards */}
{data.map((card, index) => (
-
+
))}
-
+
@@ -60,14 +60,14 @@ export default function MainGrid() {
direction={{ xs: 'row-reverse', md: 'row' }}
columns={12}
>
-
+
-
+
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 9db960c2b51c52..de404b9a6cbcee 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -154,9 +154,66 @@ The `children` passed to the Loading Button component is now wrapped in a `
+```
+
+Note that if the size or offset is the same for all breakpoints, you can use a single value:
+
+```diff
+-
++
+```
+
+Besides that, the `true` value for the size prop was renamed to `"grow"`:
+
+```diff
+-
++
+```
+
+Use this codemod to migrate your project to the new size and offset props:
+
+```bash
+npx @mui/codemod@next v6.0.0/grid-v2-props
+```
+
+If you have custom breakpoints, the change is the same:
+
+```diff
+-
++
+```
+
+Which you can cover with the same codemod by providing the custom breakpoints as an argument:
+
+```bash
+npx @mui/codemod@next v6.0.0/grid-v2-props --jscodeshit='--muiBreakpoints=mobile,desktop'
+```
#### Removal of the disableEqualOverflow prop
diff --git a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
index da5c36fd44e64c..9540a6c296583c 100644
--- a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
+++ b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
@@ -20,7 +20,7 @@ export default function GridDisableEqualOverflow() {
alignItems="center"
justifyContent="center"
textAlign="center"
- xs
+ size="grow"
>
ver.2
Top and left overflow
diff --git a/docs/data/material/migration/migration-grid-v2/GridsDiff.js b/docs/data/material/migration/migration-grid-v2/GridsDiff.js
index 659d860fa4ac9f..05a8e81dd41117 100644
--- a/docs/data/material/migration/migration-grid-v2/GridsDiff.js
+++ b/docs/data/material/migration/migration-grid-v2/GridsDiff.js
@@ -50,7 +50,7 @@ export default function GridsDiff() {
alignItems="center"
justifyContent="center"
textAlign="center"
- xs
+ size="grow"
>
ver.2
All sides
diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js
index 56aadcc46f975c..5bca5c0db7dde2 100644
--- a/docs/data/system/components/grid/AutoGrid.js
+++ b/docs/data/system/components/grid/AutoGrid.js
@@ -20,14 +20,14 @@ export default function AutoGrid() {
return (
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/system/components/grid/AutoGrid.tsx b/docs/data/system/components/grid/AutoGrid.tsx
index 56aadcc46f975c..5bca5c0db7dde2 100644
--- a/docs/data/system/components/grid/AutoGrid.tsx
+++ b/docs/data/system/components/grid/AutoGrid.tsx
@@ -20,14 +20,14 @@ export default function AutoGrid() {
return (
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
diff --git a/docs/data/system/components/grid/AutoGrid.tsx.preview b/docs/data/system/components/grid/AutoGrid.tsx.preview
index 68576f9a5c08a6..422f5122eb59a6 100644
--- a/docs/data/system/components/grid/AutoGrid.tsx.preview
+++ b/docs/data/system/components/grid/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
-
- - xs
+
+ - size=grow
-
- - xs=6
+
+ - size=6
-
- - xs
+
+ - size=grow
\ No newline at end of file
diff --git a/docs/data/system/components/grid/AutoGridNoWrap.js b/docs/data/system/components/grid/AutoGridNoWrap.js
index b10c0460fe9e17..971db7e1721af4 100644
--- a/docs/data/system/components/grid/AutoGridNoWrap.js
+++ b/docs/data/system/components/grid/AutoGridNoWrap.js
@@ -25,7 +25,7 @@ export default function AutoGridNoWrap() {
W
-
+
{message}
@@ -35,7 +35,7 @@ export default function AutoGridNoWrap() {
W
-
+
W
-
+
{message}
@@ -35,7 +35,7 @@ export default function AutoGridNoWrap() {
W
-
+
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/system/components/grid/BasicGrid.tsx b/docs/data/system/components/grid/BasicGrid.tsx
index 768b267dc850c1..9d119cd6b3e405 100644
--- a/docs/data/system/components/grid/BasicGrid.tsx
+++ b/docs/data/system/components/grid/BasicGrid.tsx
@@ -20,17 +20,17 @@ export default function BasicGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/system/components/grid/BasicGrid.tsx.preview b/docs/data/system/components/grid/BasicGrid.tsx.preview
index 643bd42f0f26a2..94df5430aefb49 100644
--- a/docs/data/system/components/grid/BasicGrid.tsx.preview
+++ b/docs/data/system/components/grid/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
-
- - xs=8
+
+ - size=8
-
- - xs=4
+
+ - size=4
-
- - xs=4
+
+ - size=4
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/system/components/grid/ColumnsGrid.js b/docs/data/system/components/grid/ColumnsGrid.js
index 4248fe738f6701..3294d5aa72922f 100644
--- a/docs/data/system/components/grid/ColumnsGrid.js
+++ b/docs/data/system/components/grid/ColumnsGrid.js
@@ -20,11 +20,11 @@ export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx b/docs/data/system/components/grid/ColumnsGrid.tsx
index 4248fe738f6701..3294d5aa72922f 100644
--- a/docs/data/system/components/grid/ColumnsGrid.tsx
+++ b/docs/data/system/components/grid/ColumnsGrid.tsx
@@ -20,11 +20,11 @@ export default function ColumnsGrid() {
return (
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx.preview b/docs/data/system/components/grid/ColumnsGrid.tsx.preview
index 753263d9d451b0..25d454075c6863 100644
--- a/docs/data/system/components/grid/ColumnsGrid.tsx.preview
+++ b/docs/data/system/components/grid/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
-
- - xs=8
+
+ - size=8
-
- - xs=8
+
+ - size=8
\ No newline at end of file
diff --git a/docs/data/system/components/grid/CustomBreakpointsGrid.js b/docs/data/system/components/grid/CustomBreakpointsGrid.js
index 75adcc9ae1e572..d51105cdb55559 100644
--- a/docs/data/system/components/grid/CustomBreakpointsGrid.js
+++ b/docs/data/system/components/grid/CustomBreakpointsGrid.js
@@ -34,7 +34,14 @@ export default function CustomBreakpointsGrid() {
{Array.from(Array(4)).map((_, index) => (
-
+
- {index + 1}
))}
diff --git a/docs/data/system/components/grid/FullWidthGrid.js b/docs/data/system/components/grid/FullWidthGrid.js
index 159a7d0d0f2b62..e86bf34a209edc 100644
--- a/docs/data/system/components/grid/FullWidthGrid.js
+++ b/docs/data/system/components/grid/FullWidthGrid.js
@@ -20,16 +20,16 @@ export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/system/components/grid/FullWidthGrid.tsx b/docs/data/system/components/grid/FullWidthGrid.tsx
index 159a7d0d0f2b62..e86bf34a209edc 100644
--- a/docs/data/system/components/grid/FullWidthGrid.tsx
+++ b/docs/data/system/components/grid/FullWidthGrid.tsx
@@ -20,16 +20,16 @@ export default function FullWidthGrid() {
return (
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
diff --git a/docs/data/system/components/grid/FullWidthGrid.tsx.preview b/docs/data/system/components/grid/FullWidthGrid.tsx.preview
index 9085084a78ddaa..255782d9b57349 100644
--- a/docs/data/system/components/grid/FullWidthGrid.tsx.preview
+++ b/docs/data/system/components/grid/FullWidthGrid.tsx.preview
@@ -1,14 +1,14 @@
-
+
- xs=6 md=8
-
+
- xs=6 md=4
-
+
- xs=6 md=4
-
+
- xs=6 md=8
\ No newline at end of file
diff --git a/docs/data/system/components/grid/NestedGrid.js b/docs/data/system/components/grid/NestedGrid.js
index e1facc18821ed3..267c08c3881666 100644
--- a/docs/data/system/components/grid/NestedGrid.js
+++ b/docs/data/system/components/grid/NestedGrid.js
@@ -16,11 +16,11 @@ export default function NestedGrid() {
return (
-
+
- Email subscribe section
-
-
+
+
-
-
+
-
-
+
-
-
+
-
- © Copyright
diff --git a/docs/data/system/components/grid/NestedGrid.tsx b/docs/data/system/components/grid/NestedGrid.tsx
index e1facc18821ed3..267c08c3881666 100644
--- a/docs/data/system/components/grid/NestedGrid.tsx
+++ b/docs/data/system/components/grid/NestedGrid.tsx
@@ -16,11 +16,11 @@ export default function NestedGrid() {
return (
-
+
- Email subscribe section
-
-
+
+
-
-
+
-
-
+
-
-
+
-
- © Copyright
diff --git a/docs/data/system/components/grid/OffsetGrid.js b/docs/data/system/components/grid/OffsetGrid.js
index 5e40c24c24d4ec..7143b5f1b45e81 100644
--- a/docs/data/system/components/grid/OffsetGrid.js
+++ b/docs/data/system/components/grid/OffsetGrid.js
@@ -18,16 +18,16 @@ const Item = styled('div')(({ theme }) => ({
export default function OffsetGrid() {
return (
-
+
- 1
-
+
- 2
-
+
- 3
-
+
- 4
diff --git a/docs/data/system/components/grid/OffsetGrid.tsx b/docs/data/system/components/grid/OffsetGrid.tsx
index 5e40c24c24d4ec..7143b5f1b45e81 100644
--- a/docs/data/system/components/grid/OffsetGrid.tsx
+++ b/docs/data/system/components/grid/OffsetGrid.tsx
@@ -18,16 +18,16 @@ const Item = styled('div')(({ theme }) => ({
export default function OffsetGrid() {
return (
-
+
- 1
-
+
- 2
-
+