diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js
index 1d69ce0065b5aa..a889d3eea7556e 100644
--- a/docs/data/joy/components/grid/AutoGrid.js
+++ b/docs/data/joy/components/grid/AutoGrid.js
@@ -19,13 +19,13 @@ export default function AutoGrid() {
   return (
     <Grid container spacing={3} sx={{ flexGrow: 1 }}>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
       <Grid size={6}>
-        <Item>xs=6</Item>
+        <Item>size=6</Item>
       </Grid>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/AutoGrid.tsx b/docs/data/joy/components/grid/AutoGrid.tsx
index 1d69ce0065b5aa..a889d3eea7556e 100644
--- a/docs/data/joy/components/grid/AutoGrid.tsx
+++ b/docs/data/joy/components/grid/AutoGrid.tsx
@@ -19,13 +19,13 @@ export default function AutoGrid() {
   return (
     <Grid container spacing={3} sx={{ flexGrow: 1 }}>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
       <Grid size={6}>
-        <Item>xs=6</Item>
+        <Item>size=6</Item>
       </Grid>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/AutoGrid.tsx.preview b/docs/data/joy/components/grid/AutoGrid.tsx.preview
index af91151402b8c1..6659ec7ba99118 100644
--- a/docs/data/joy/components/grid/AutoGrid.tsx.preview
+++ b/docs/data/joy/components/grid/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3} sx={{ flexGrow: 1 }}>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ 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 96e9f446b2f9d2..0a1c0542411ab5 100644
--- a/docs/data/joy/components/grid/BasicGrid.js
+++ b/docs/data/joy/components/grid/BasicGrid.js
@@ -19,16 +19,16 @@ export default function BasicGrid() {
   return (
     <Grid container spacing={2} sx={{ flexGrow: 1 }}>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
       <Grid size={4}>
-        <Item>xs=4</Item>
+        <Item>size=4</Item>
       </Grid>
       <Grid size={4}>
-        <Item>xs=4</Item>
+        <Item>size=4</Item>
       </Grid>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/BasicGrid.tsx b/docs/data/joy/components/grid/BasicGrid.tsx
index 96e9f446b2f9d2..0a1c0542411ab5 100644
--- a/docs/data/joy/components/grid/BasicGrid.tsx
+++ b/docs/data/joy/components/grid/BasicGrid.tsx
@@ -19,16 +19,16 @@ export default function BasicGrid() {
   return (
     <Grid container spacing={2} sx={{ flexGrow: 1 }}>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
       <Grid size={4}>
-        <Item>xs=4</Item>
+        <Item>size=4</Item>
       </Grid>
       <Grid size={4}>
-        <Item>xs=4</Item>
+        <Item>size=4</Item>
       </Grid>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/BasicGrid.tsx.preview b/docs/data/joy/components/grid/BasicGrid.tsx.preview
index 646dd79c206551..162fd81bb8ac5b 100644
--- a/docs/data/joy/components/grid/BasicGrid.tsx.preview
+++ b/docs/data/joy/components/grid/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
 <Grid container spacing={2} sx={{ flexGrow: 1 }}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ 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() {
     <Box sx={{ width: 1 }}>
       <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
         <Box sx={{ gridColumn: 'span 8' }}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 4' }}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 4' }}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 8' }}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Box>
       </Box>
     </Box>
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() {
     <Box sx={{ width: 1 }}>
       <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
         <Box sx={{ gridColumn: 'span 8' }}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 4' }}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 4' }}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Box>
         <Box sx={{ gridColumn: 'span 8' }}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Box>
       </Box>
     </Box>
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 @@
 <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
   <Box sx={{ gridColumn: 'span 8' }}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Box>
   <Box sx={{ gridColumn: 'span 4' }}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Box>
   <Box sx={{ gridColumn: 'span 4' }}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Box>
   <Box sx={{ gridColumn: 'span 8' }}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Box>
 </Box>
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/ColumnsGrid.js b/docs/data/joy/components/grid/ColumnsGrid.js
index 214211862ef82f..53b29dbd53a485 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.js
+++ b/docs/data/joy/components/grid/ColumnsGrid.js
@@ -19,10 +19,10 @@ export default function ColumnsGrid() {
   return (
     <Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx b/docs/data/joy/components/grid/ColumnsGrid.tsx
index 214211862ef82f..53b29dbd53a485 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.tsx
+++ b/docs/data/joy/components/grid/ColumnsGrid.tsx
@@ -19,10 +19,10 @@ export default function ColumnsGrid() {
   return (
     <Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
       <Grid size={8}>
-        <Item>xs=8</Item>
+        <Item>size=8</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx.preview b/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
index 7d151a3598d7ce..bcc4b8aedb471d 100644
--- a/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
+++ b/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
 <Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.js b/docs/data/joy/components/grid/ResponsiveGrid.js
index 8c7cc9390eae69..f099db6c2d71d2 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.js
+++ b/docs/data/joy/components/grid/ResponsiveGrid.js
@@ -25,7 +25,7 @@ export default function ResponsiveGrid() {
     >
       {Array.from(Array(6)).map((_, index) => (
         <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-          <Item>xs=2</Item>
+          <Item>{index + 1}</Item>
         </Grid>
       ))}
     </Grid>
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx b/docs/data/joy/components/grid/ResponsiveGrid.tsx
index 8c7cc9390eae69..f099db6c2d71d2 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.tsx
+++ b/docs/data/joy/components/grid/ResponsiveGrid.tsx
@@ -25,7 +25,7 @@ export default function ResponsiveGrid() {
     >
       {Array.from(Array(6)).map((_, index) => (
         <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-          <Item>xs=2</Item>
+          <Item>{index + 1}</Item>
         </Grid>
       ))}
     </Grid>
diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview b/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
index 67c084ed05be7c..bf95bc84b701e1 100644
--- a/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
+++ b/docs/data/joy/components/grid/ResponsiveGrid.tsx.preview
@@ -6,7 +6,7 @@
 >
   {Array.from(Array(6)).map((_, index) => (
     <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-      <Item>xs=2</Item>
+      <Item>{index + 1}</Item>
     </Grid>
   ))}
 </Grid>
\ No newline at end of file
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.js b/docs/data/joy/components/grid/VariableWidthGrid.js
index 61b79ef8cd8709..056245b0d95abf 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.js
+++ b/docs/data/joy/components/grid/VariableWidthGrid.js
@@ -19,13 +19,13 @@ export default function VariableWidthGrid() {
   return (
     <Grid container spacing={3} sx={{ flexGrow: 1 }}>
       <Grid size="auto">
-        <Item>variable width content</Item>
+        <Item>size=auto</Item>
       </Grid>
       <Grid size={6}>
-        <Item>xs=6</Item>
+        <Item>size=6</Item>
       </Grid>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx b/docs/data/joy/components/grid/VariableWidthGrid.tsx
index 61b79ef8cd8709..056245b0d95abf 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.tsx
+++ b/docs/data/joy/components/grid/VariableWidthGrid.tsx
@@ -19,13 +19,13 @@ export default function VariableWidthGrid() {
   return (
     <Grid container spacing={3} sx={{ flexGrow: 1 }}>
       <Grid size="auto">
-        <Item>variable width content</Item>
+        <Item>size=auto</Item>
       </Grid>
       <Grid size={6}>
-        <Item>xs=6</Item>
+        <Item>size=6</Item>
       </Grid>
       <Grid size="grow">
-        <Item>xs</Item>
+        <Item>size=grow</Item>
       </Grid>
     </Grid>
   );
diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview b/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
index 92a807796f2b46..b1fdd44a57b2e4 100644
--- a/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
+++ b/docs/data/joy/components/grid/VariableWidthGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3} sx={{ flexGrow: 1 }}>
   <Grid size="auto">
-    <Item>variable width content</Item>
+    <Item>size=auto</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid2/AutoGrid.js
index af945df3efeb11..ca9c7ec891ad18 100644
--- a/docs/data/material/components/grid2/AutoGrid.js
+++ b/docs/data/material/components/grid2/AutoGrid.js
@@ -20,13 +20,13 @@ export default function AutoGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx
index af945df3efeb11..ca9c7ec891ad18 100644
--- a/docs/data/material/components/grid2/AutoGrid.tsx
+++ b/docs/data/material/components/grid2/AutoGrid.tsx
@@ -20,13 +20,13 @@ export default function AutoGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx.preview b/docs/data/material/components/grid2/AutoGrid.tsx.preview
index 79940b035e74cf..422f5122eb59a6 100644
--- a/docs/data/material/components/grid2/AutoGrid.tsx.preview
+++ b/docs/data/material/components/grid2/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3}>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ 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 eb51e7f7e90c87..86f550e3c5949c 100644
--- a/docs/data/material/components/grid2/BasicGrid.js
+++ b/docs/data/material/components/grid2/BasicGrid.js
@@ -20,16 +20,16 @@ export default function BasicGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx
index eb51e7f7e90c87..86f550e3c5949c 100644
--- a/docs/data/material/components/grid2/BasicGrid.tsx
+++ b/docs/data/material/components/grid2/BasicGrid.tsx
@@ -20,16 +20,16 @@ export default function BasicGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx.preview b/docs/data/material/components/grid2/BasicGrid.tsx.preview
index dfa04c998b4ef8..94df5430aefb49 100644
--- a/docs/data/material/components/grid2/BasicGrid.tsx.preview
+++ b/docs/data/material/components/grid2/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
 <Grid container spacing={2}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ 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 6826a8c0c94df2..15ceb2c25893bd 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.js
+++ b/docs/data/material/components/grid2/ColumnsGrid.js
@@ -20,10 +20,10 @@ export default function ColumnsGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={16}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx
index 6826a8c0c94df2..15ceb2c25893bd 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.tsx
+++ b/docs/data/material/components/grid2/ColumnsGrid.tsx
@@ -20,10 +20,10 @@ export default function ColumnsGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={16}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview b/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
index ca075022277f63..25d454075c6863 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
+++ b/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
 <Grid container spacing={2} columns={16}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid2/NestedGridColumns.js
index 0305b451c05ba2..6bbb985a425ba7 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.js
+++ b/docs/data/material/components/grid2/NestedGridColumns.js
@@ -20,25 +20,25 @@ export default function NestedGridColumns() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={24}>
         <Grid size={8}>
-          <Item>xs=8/24</Item>
+          <Item>size=8/24</Item>
         </Grid>
         <Grid container size={16}>
           <Grid size={12}>
-            <Item>nested xs=12/24</Item>
+            <Item>nested size=12/24</Item>
           </Grid>
           <Grid size={12}>
-            <Item>nested xs=12/24</Item>
+            <Item>nested size=12/24</Item>
           </Grid>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8/24</Item>
+          <Item>size=8/24</Item>
         </Grid>
         <Grid container columns={12} size={16}>
           <Grid size={6}>
-            <Item>nested xs=6/12</Item>
+            <Item>nested size=6/12</Item>
           </Grid>
           <Grid size={6}>
-            <Item>nested xs=6/12</Item>
+            <Item>nested size=6/12</Item>
           </Grid>
         </Grid>
       </Grid>
diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid2/NestedGridColumns.tsx
index 0305b451c05ba2..6bbb985a425ba7 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.tsx
+++ b/docs/data/material/components/grid2/NestedGridColumns.tsx
@@ -20,25 +20,25 @@ export default function NestedGridColumns() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={24}>
         <Grid size={8}>
-          <Item>xs=8/24</Item>
+          <Item>size=8/24</Item>
         </Grid>
         <Grid container size={16}>
           <Grid size={12}>
-            <Item>nested xs=12/24</Item>
+            <Item>nested size=12/24</Item>
           </Grid>
           <Grid size={12}>
-            <Item>nested xs=12/24</Item>
+            <Item>nested size=12/24</Item>
           </Grid>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8/24</Item>
+          <Item>size=8/24</Item>
         </Grid>
         <Grid container columns={12} size={16}>
           <Grid size={6}>
-            <Item>nested xs=6/12</Item>
+            <Item>nested size=6/12</Item>
           </Grid>
           <Grid size={6}>
-            <Item>nested xs=6/12</Item>
+            <Item>nested size=6/12</Item>
           </Grid>
         </Grid>
       </Grid>
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid2/ResponsiveGrid.js
index 1846032c308557..e80fbbdee44bec 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.js
+++ b/docs/data/material/components/grid2/ResponsiveGrid.js
@@ -21,7 +21,7 @@ export default function ResponsiveGrid() {
       <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
         {Array.from(Array(6)).map((_, index) => (
           <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-            <Item>xs=2</Item>
+            <Item>{index + 1}</Item>
           </Grid>
         ))}
       </Grid>
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid2/ResponsiveGrid.tsx
index 1846032c308557..e80fbbdee44bec 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.tsx
+++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx
@@ -21,7 +21,7 @@ export default function ResponsiveGrid() {
       <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
         {Array.from(Array(6)).map((_, index) => (
           <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-            <Item>xs=2</Item>
+            <Item>{index + 1}</Item>
           </Grid>
         ))}
       </Grid>
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview b/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
index 3ee00456a8b7d2..b960ec563a5e61 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
+++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview
@@ -1,7 +1,7 @@
 <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
   {Array.from(Array(6)).map((_, index) => (
     <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
-      <Item>xs=2</Item>
+      <Item>{index + 1}</Item>
     </Grid>
   ))}
 </Grid>
\ 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 2fe6f8681b8dde..669561ef0eff1b 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.js
+++ b/docs/data/material/components/grid2/VariableWidthGrid.js
@@ -20,13 +20,13 @@ export default function VariableWidthGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="auto">
-          <Item>variable width content</Item>
+          <Item>size=auto</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid2/VariableWidthGrid.tsx
index 2fe6f8681b8dde..669561ef0eff1b 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.tsx
+++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx
@@ -20,13 +20,13 @@ export default function VariableWidthGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="auto">
-          <Item>variable width content</Item>
+          <Item>size=auto</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
index c85b57014e0f5e..e88443265d2ec0 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
+++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3}>
   <Grid size="auto">
-    <Item>variable width content</Item>
+    <Item>size=auto</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js
index b4bfafa205ced9..5bca5c0db7dde2 100644
--- a/docs/data/system/components/grid/AutoGrid.js
+++ b/docs/data/system/components/grid/AutoGrid.js
@@ -21,13 +21,13 @@ export default function AutoGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/AutoGrid.tsx b/docs/data/system/components/grid/AutoGrid.tsx
index b4bfafa205ced9..5bca5c0db7dde2 100644
--- a/docs/data/system/components/grid/AutoGrid.tsx
+++ b/docs/data/system/components/grid/AutoGrid.tsx
@@ -21,13 +21,13 @@ export default function AutoGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/AutoGrid.tsx.preview b/docs/data/system/components/grid/AutoGrid.tsx.preview
index 79940b035e74cf..422f5122eb59a6 100644
--- a/docs/data/system/components/grid/AutoGrid.tsx.preview
+++ b/docs/data/system/components/grid/AutoGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3}>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/system/components/grid/BasicGrid.js b/docs/data/system/components/grid/BasicGrid.js
index 1854fe10bc2cf4..9d119cd6b3e405 100644
--- a/docs/data/system/components/grid/BasicGrid.js
+++ b/docs/data/system/components/grid/BasicGrid.js
@@ -21,16 +21,16 @@ export default function BasicGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/BasicGrid.tsx b/docs/data/system/components/grid/BasicGrid.tsx
index 1854fe10bc2cf4..9d119cd6b3e405 100644
--- a/docs/data/system/components/grid/BasicGrid.tsx
+++ b/docs/data/system/components/grid/BasicGrid.tsx
@@ -21,16 +21,16 @@ export default function BasicGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={4}>
-          <Item>xs=4</Item>
+          <Item>size=4</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/BasicGrid.tsx.preview b/docs/data/system/components/grid/BasicGrid.tsx.preview
index dfa04c998b4ef8..94df5430aefb49 100644
--- a/docs/data/system/components/grid/BasicGrid.tsx.preview
+++ b/docs/data/system/components/grid/BasicGrid.tsx.preview
@@ -1,14 +1,14 @@
 <Grid container spacing={2}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={4}>
-    <Item>xs=4</Item>
+    <Item>size=4</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ 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 00688dd8a1446c..3294d5aa72922f 100644
--- a/docs/data/system/components/grid/ColumnsGrid.js
+++ b/docs/data/system/components/grid/ColumnsGrid.js
@@ -21,10 +21,10 @@ export default function ColumnsGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={16}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx b/docs/data/system/components/grid/ColumnsGrid.tsx
index 00688dd8a1446c..3294d5aa72922f 100644
--- a/docs/data/system/components/grid/ColumnsGrid.tsx
+++ b/docs/data/system/components/grid/ColumnsGrid.tsx
@@ -21,10 +21,10 @@ export default function ColumnsGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} columns={16}>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
         <Grid size={8}>
-          <Item>xs=8</Item>
+          <Item>size=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx.preview b/docs/data/system/components/grid/ColumnsGrid.tsx.preview
index ca075022277f63..25d454075c6863 100644
--- a/docs/data/system/components/grid/ColumnsGrid.tsx.preview
+++ b/docs/data/system/components/grid/ColumnsGrid.tsx.preview
@@ -1,8 +1,8 @@
 <Grid container spacing={2} columns={16}>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
   <Grid size={8}>
-    <Item>xs=8</Item>
+    <Item>size=8</Item>
   </Grid>
 </Grid>
\ No newline at end of file
diff --git a/docs/data/system/components/grid/VariableWidthGrid.js b/docs/data/system/components/grid/VariableWidthGrid.js
index 34238afbed0e42..cc3e7219c95056 100644
--- a/docs/data/system/components/grid/VariableWidthGrid.js
+++ b/docs/data/system/components/grid/VariableWidthGrid.js
@@ -21,13 +21,13 @@ export default function VariableWidthGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="auto">
-          <Item>Variable width item</Item>
+          <Item>size=auto</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/VariableWidthGrid.tsx b/docs/data/system/components/grid/VariableWidthGrid.tsx
index 34238afbed0e42..cc3e7219c95056 100644
--- a/docs/data/system/components/grid/VariableWidthGrid.tsx
+++ b/docs/data/system/components/grid/VariableWidthGrid.tsx
@@ -21,13 +21,13 @@ export default function VariableWidthGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={3}>
         <Grid size="auto">
-          <Item>Variable width item</Item>
+          <Item>size=auto</Item>
         </Grid>
         <Grid size={6}>
-          <Item>xs=6</Item>
+          <Item>size=6</Item>
         </Grid>
         <Grid size="grow">
-          <Item>xs</Item>
+          <Item>size=grow</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/data/system/components/grid/VariableWidthGrid.tsx.preview b/docs/data/system/components/grid/VariableWidthGrid.tsx.preview
index 73ff6c01f1b498..e88443265d2ec0 100644
--- a/docs/data/system/components/grid/VariableWidthGrid.tsx.preview
+++ b/docs/data/system/components/grid/VariableWidthGrid.tsx.preview
@@ -1,11 +1,11 @@
 <Grid container spacing={3}>
   <Grid size="auto">
-    <Item>Variable width item</Item>
+    <Item>size=auto</Item>
   </Grid>
   <Grid size={6}>
-    <Item>xs=6</Item>
+    <Item>size=6</Item>
   </Grid>
   <Grid size="grow">
-    <Item>xs</Item>
+    <Item>size=grow</Item>
   </Grid>
 </Grid>
\ No newline at end of file