From 07f39eb4fcd3e20066ed76b21a3f456475903ec6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 20 Mar 2021 17:42:13 +0100
Subject: [PATCH 1/3] [docs] Improve the docs of the Grid component

---
 docs/src/pages/components/box/box.md          |  5 ++
 docs/src/pages/components/grid/AutoGrid.js    | 16 +----
 docs/src/pages/components/grid/AutoGrid.tsx   | 17 ++----
 docs/src/pages/components/grid/BasicGrid.js   | 34 +++++++++++
 docs/src/pages/components/grid/BasicGrid.tsx  | 35 +++++++++++
 docs/src/pages/components/grid/CSSGrid.js     | 58 ++++--------------
 docs/src/pages/components/grid/CSSGrid.tsx    | 59 ++++---------------
 .../src/pages/components/grid/CenteredGrid.js | 41 -------------
 .../pages/components/grid/CenteredGrid.tsx    | 41 -------------
 docs/src/pages/components/grid/ComplexGrid.js |  6 +-
 .../src/pages/components/grid/ComplexGrid.tsx |  6 +-
 .../pages/components/grid/FullWidthGrid.js    | 31 ++++------
 .../pages/components/grid/FullWidthGrid.tsx   | 32 ++++------
 .../pages/components/grid/InteractiveGrid.js  |  6 +-
 .../pages/components/grid/InteractiveGrid.tsx |  6 +-
 docs/src/pages/components/grid/NestedGrid.js  |  2 +
 docs/src/pages/components/grid/NestedGrid.tsx |  3 +
 docs/src/pages/components/grid/SpacingGrid.js |  4 +-
 .../src/pages/components/grid/SpacingGrid.tsx |  4 +-
 docs/src/pages/components/grid/grid.md        | 32 ++++++----
 docs/src/pages/components/stack/BasicStack.js | 26 ++++----
 .../src/pages/components/stack/BasicStack.tsx | 22 +++----
 .../pages/components/stack/DirectionStack.js  | 26 ++++----
 .../pages/components/stack/DirectionStack.tsx | 22 +++----
 .../pages/components/stack/DividerStack.js    | 26 ++++----
 .../pages/components/stack/DividerStack.tsx   | 22 +++----
 .../components/stack/InteractiveStack.js      |  2 +-
 .../components/stack/InteractiveStack.tsx     |  2 +-
 .../pages/components/stack/ResponsiveStack.js | 26 ++++----
 .../components/stack/ResponsiveStack.tsx      | 22 +++----
 docs/src/pages/components/stack/stack.md      |  9 +++
 .../pages/components/typography/typography.md |  5 ++
 docs/src/pages/system/grid/grid.md            |  4 +-
 33 files changed, 279 insertions(+), 373 deletions(-)
 create mode 100644 docs/src/pages/components/grid/BasicGrid.js
 create mode 100644 docs/src/pages/components/grid/BasicGrid.tsx
 delete mode 100644 docs/src/pages/components/grid/CenteredGrid.js
 delete mode 100644 docs/src/pages/components/grid/CenteredGrid.tsx

diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md
index 777e7af75098da..639afd92f89712 100644
--- a/docs/src/pages/components/box/box.md
+++ b/docs/src/pages/components/box/box.md
@@ -69,3 +69,8 @@ import Box from '@material-ui/core/Box';
 ## System props
 
 As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component.
+For instance, a margin-top:
+
+```jsx
+<Box mt={2}>
+```
diff --git a/docs/src/pages/components/grid/AutoGrid.js b/docs/src/pages/components/grid/AutoGrid.js
index 0c63675fd69aad..bfe6d79ae0b4fb 100644
--- a/docs/src/pages/components/grid/AutoGrid.js
+++ b/docs/src/pages/components/grid/AutoGrid.js
@@ -5,7 +5,9 @@ import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
 const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
 }));
@@ -13,18 +15,6 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function AutoGrid() {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-      </Grid>
-      <br />
       <Grid container spacing={3}>
         <Grid item xs>
           <Item>xs</Item>
diff --git a/docs/src/pages/components/grid/AutoGrid.tsx b/docs/src/pages/components/grid/AutoGrid.tsx
index 0c63675fd69aad..8418dde9da3444 100644
--- a/docs/src/pages/components/grid/AutoGrid.tsx
+++ b/docs/src/pages/components/grid/AutoGrid.tsx
@@ -3,9 +3,12 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
+import * as CSS from 'csstype';
 
 const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
 }));
@@ -13,18 +16,6 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function AutoGrid() {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-        <Grid item xs>
-          <Item>xs</Item>
-        </Grid>
-      </Grid>
-      <br />
       <Grid container spacing={3}>
         <Grid item xs>
           <Item>xs</Item>
diff --git a/docs/src/pages/components/grid/BasicGrid.js b/docs/src/pages/components/grid/BasicGrid.js
new file mode 100644
index 00000000000000..96b0ced2748606
--- /dev/null
+++ b/docs/src/pages/components/grid/BasicGrid.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+export default function BasicGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+        <Grid item xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid item xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid item xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/grid/BasicGrid.tsx b/docs/src/pages/components/grid/BasicGrid.tsx
new file mode 100644
index 00000000000000..bffd4bfe9e10db
--- /dev/null
+++ b/docs/src/pages/components/grid/BasicGrid.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import * as CSS from 'csstype';
+
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+export default function BasicGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+        <Grid item xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid item xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid item xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/grid/CSSGrid.js b/docs/src/pages/components/grid/CSSGrid.js
index ce8266215d0049..e9d155ede3b79f 100644
--- a/docs/src/pages/components/grid/CSSGrid.js
+++ b/docs/src/pages/components/grid/CSSGrid.js
@@ -1,69 +1,33 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
 
 const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
-  whiteSpace: 'nowrap',
-  marginBottom: theme.spacing(1),
 }));
 
 export default function CSSGrid() {
   return (
-    <div>
-      <Typography variant="subtitle1" gutterBottom component="div">
-        Material-UI Grid:
-      </Typography>
-      <Grid container spacing={3}>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={8}>
+    <Box sx={{ width: 1 }}>
+      <Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
+        <Box gridColumn="auto / span 8">
           <Item>xs=8</Item>
-        </Grid>
-        <Grid item xs={4}>
-          <Item>xs=4</Item>
-        </Grid>
-      </Grid>
-      <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" gutterBottom component="div">
-        CSS Grid Layout:
-      </Typography>
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 3 }}>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
-        </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
+        <Box gridColumn="auto / span 4">
+          <Item>xs=4</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
+        <Box gridColumn="auto / span 4">
+          <Item>xs=4</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 8' }}>
+        <Box gridColumn="auto / span 8">
           <Item>xs=8</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 4' }}>
-          <Item>xs=4</Item>
-        </Box>
       </Box>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/grid/CSSGrid.tsx b/docs/src/pages/components/grid/CSSGrid.tsx
index ce8266215d0049..ae6dad62c44847 100644
--- a/docs/src/pages/components/grid/CSSGrid.tsx
+++ b/docs/src/pages/components/grid/CSSGrid.tsx
@@ -1,69 +1,34 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
+import * as CSS from 'csstype';
 
 const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
-  whiteSpace: 'nowrap',
-  marginBottom: theme.spacing(1),
 }));
 
 export default function CSSGrid() {
   return (
-    <div>
-      <Typography variant="subtitle1" gutterBottom component="div">
-        Material-UI Grid:
-      </Typography>
-      <Grid container spacing={3}>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={8}>
+    <Box sx={{ width: 1 }}>
+      <Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
+        <Box gridColumn="auto / span 8">
           <Item>xs=8</Item>
-        </Grid>
-        <Grid item xs={4}>
-          <Item>xs=4</Item>
-        </Grid>
-      </Grid>
-      <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" gutterBottom component="div">
-        CSS Grid Layout:
-      </Typography>
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 3 }}>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
-        </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
+        <Box gridColumn="auto / span 4">
+          <Item>xs=4</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 3' }}>
-          <Item>xs=3</Item>
+        <Box gridColumn="auto / span 4">
+          <Item>xs=4</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 8' }}>
+        <Box gridColumn="auto / span 8">
           <Item>xs=8</Item>
         </Box>
-        <Box sx={{ gridColumnEnd: 'span 4' }}>
-          <Item>xs=4</Item>
-        </Box>
       </Box>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/grid/CenteredGrid.js b/docs/src/pages/components/grid/CenteredGrid.js
deleted file mode 100644
index c476e76beaaa46..00000000000000
--- a/docs/src/pages/components/grid/CenteredGrid.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
-  textAlign: 'center',
-  color: theme.palette.text.secondary,
-}));
-
-export default function CenteredGrid() {
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Item>xs=12</Item>
-        </Grid>
-        <Grid item xs={6}>
-          <Item>xs=6</Item>
-        </Grid>
-        <Grid item xs={6}>
-          <Item>xs=6</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
diff --git a/docs/src/pages/components/grid/CenteredGrid.tsx b/docs/src/pages/components/grid/CenteredGrid.tsx
deleted file mode 100644
index c476e76beaaa46..00000000000000
--- a/docs/src/pages/components/grid/CenteredGrid.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
-  textAlign: 'center',
-  color: theme.palette.text.secondary,
-}));
-
-export default function CenteredGrid() {
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Item>xs=12</Item>
-        </Grid>
-        <Grid item xs={6}>
-          <Item>xs=6</Item>
-        </Grid>
-        <Grid item xs={6}>
-          <Item>xs=6</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-        <Grid item xs={3}>
-          <Item>xs=3</Item>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
diff --git a/docs/src/pages/components/grid/ComplexGrid.js b/docs/src/pages/components/grid/ComplexGrid.js
index 3a00684d3ddd0c..480d01dfdbb890 100644
--- a/docs/src/pages/components/grid/ComplexGrid.js
+++ b/docs/src/pages/components/grid/ComplexGrid.js
@@ -5,12 +5,12 @@ import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
-const Img = styled('img')(() => ({
+const Img = styled('img')({
   margin: 'auto',
   display: 'block',
   maxWidth: '100%',
   maxHeight: '100%',
-}));
+});
 
 export default function ComplexGrid() {
   return (
@@ -30,7 +30,7 @@ export default function ComplexGrid() {
               <Typography variant="body2" gutterBottom>
                 Full resolution 1920x1080 • JPEG
               </Typography>
-              <Typography variant="body2" color="textSecondary">
+              <Typography variant="body2" color="text.secondary">
                 ID: 1030114
               </Typography>
             </Grid>
diff --git a/docs/src/pages/components/grid/ComplexGrid.tsx b/docs/src/pages/components/grid/ComplexGrid.tsx
index 3a00684d3ddd0c..480d01dfdbb890 100644
--- a/docs/src/pages/components/grid/ComplexGrid.tsx
+++ b/docs/src/pages/components/grid/ComplexGrid.tsx
@@ -5,12 +5,12 @@ import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
-const Img = styled('img')(() => ({
+const Img = styled('img')({
   margin: 'auto',
   display: 'block',
   maxWidth: '100%',
   maxHeight: '100%',
-}));
+});
 
 export default function ComplexGrid() {
   return (
@@ -30,7 +30,7 @@ export default function ComplexGrid() {
               <Typography variant="body2" gutterBottom>
                 Full resolution 1920x1080 • JPEG
               </Typography>
-              <Typography variant="body2" color="textSecondary">
+              <Typography variant="body2" color="text.secondary">
                 ID: 1030114
               </Typography>
             </Grid>
diff --git a/docs/src/pages/components/grid/FullWidthGrid.js b/docs/src/pages/components/grid/FullWidthGrid.js
index 93c487972aa5a5..8c4b6ad9d04548 100644
--- a/docs/src/pages/components/grid/FullWidthGrid.js
+++ b/docs/src/pages/components/grid/FullWidthGrid.js
@@ -5,7 +5,9 @@ import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
 const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
 }));
@@ -13,27 +15,18 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function FullWidthGrid() {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Item>xs=12</Item>
+      <Grid container spacing={2}>
+        <Grid item xs={6} md={8}>
+          <Item>xs=6 md=8</Item>
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <Item>xs=12 sm=6</Item>
+        <Grid item xs={6} md={4}>
+          <Item>xs=6 md=4</Item>
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <Item>xs=12 sm=6</Item>
+        <Grid item xs={6} md={4}>
+          <Item>xs=6 md=4</Item>
         </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
+        <Grid item xs={6} md={8}>
+          <Item>xs=6 md=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/src/pages/components/grid/FullWidthGrid.tsx b/docs/src/pages/components/grid/FullWidthGrid.tsx
index 93c487972aa5a5..3fb6c3b680f77e 100644
--- a/docs/src/pages/components/grid/FullWidthGrid.tsx
+++ b/docs/src/pages/components/grid/FullWidthGrid.tsx
@@ -3,9 +3,12 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
+import * as CSS from 'csstype';
 
 const Item = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
 }));
@@ -13,27 +16,18 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function FullWidthGrid() {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Item>xs=12</Item>
+      <Grid container spacing={2}>
+        <Grid item xs={6} md={8}>
+          <Item>xs=6 md=8</Item>
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <Item>xs=12 sm=6</Item>
+        <Grid item xs={6} md={4}>
+          <Item>xs=6 md=4</Item>
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <Item>xs=12 sm=6</Item>
+        <Grid item xs={6} md={4}>
+          <Item>xs=6 md=4</Item>
         </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
-        </Grid>
-        <Grid item xs={6} sm={3}>
-          <Item>xs=6 sm=3</Item>
+        <Grid item xs={6} md={8}>
+          <Item>xs=6 md=8</Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js
index 5788868b4a6112..53999ec18cf48b 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.js
+++ b/docs/src/pages/components/grid/InteractiveGrid.js
@@ -56,7 +56,7 @@ export default function InteractiveGrid() {
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>direction</FormLabel>
+                <FormLabel component="legend">direction</FormLabel>
                 <RadioGroup
                   row
                   name="direction"
@@ -87,7 +87,7 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justifyContent</FormLabel>
+                <FormLabel component="legend">justifyContent</FormLabel>
                 <RadioGroup
                   row
                   name="justifyContent"
@@ -132,7 +132,7 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>alignItems</FormLabel>
+                <FormLabel component="legend">alignItems</FormLabel>
                 <RadioGroup
                   row
                   name="alignItems"
diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
index f9e51116c39fb6..0ee011f5d8db8d 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.tsx
+++ b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -72,7 +72,7 @@ export default function InteractiveGrid() {
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>direction</FormLabel>
+                <FormLabel component="legend">direction</FormLabel>
                 <RadioGroup
                   row
                   name="direction"
@@ -105,7 +105,7 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justifyContent</FormLabel>
+                <FormLabel component="legend">justifyContent</FormLabel>
                 <RadioGroup
                   row
                   name="justifyContent"
@@ -152,7 +152,7 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>alignItems</FormLabel>
+                <FormLabel component="legend">alignItems</FormLabel>
                 <RadioGroup
                   row
                   name="alignItems"
diff --git a/docs/src/pages/components/grid/NestedGrid.js b/docs/src/pages/components/grid/NestedGrid.js
index f349f612d9c1b4..cd5efbe9a97e9f 100644
--- a/docs/src/pages/components/grid/NestedGrid.js
+++ b/docs/src/pages/components/grid/NestedGrid.js
@@ -5,6 +5,8 @@ import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
 const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
diff --git a/docs/src/pages/components/grid/NestedGrid.tsx b/docs/src/pages/components/grid/NestedGrid.tsx
index f349f612d9c1b4..a93e3bf3f321af 100644
--- a/docs/src/pages/components/grid/NestedGrid.tsx
+++ b/docs/src/pages/components/grid/NestedGrid.tsx
@@ -3,8 +3,11 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
+import * as CSS from 'csstype';
 
 const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js
index ec9bc1214c8e75..e996730068ba08 100644
--- a/docs/src/pages/components/grid/SpacingGrid.js
+++ b/docs/src/pages/components/grid/SpacingGrid.js
@@ -27,8 +27,8 @@ export default function SpacingGrid() {
       <Grid item xs={12}>
         <Paper sx={{ p: 2 }}>
           <Grid container>
-            <Grid item>
-              <FormLabel>spacing</FormLabel>
+            <Grid item component="fieldset">
+              <FormLabel component="legend">spacing</FormLabel>
               <RadioGroup
                 name="spacing"
                 aria-label="spacing"
diff --git a/docs/src/pages/components/grid/SpacingGrid.tsx b/docs/src/pages/components/grid/SpacingGrid.tsx
index c33bac01f28380..32abc116a003c3 100644
--- a/docs/src/pages/components/grid/SpacingGrid.tsx
+++ b/docs/src/pages/components/grid/SpacingGrid.tsx
@@ -27,8 +27,8 @@ export default function SpacingGrid() {
       <Grid item xs={12}>
         <Paper sx={{ p: 2 }}>
           <Grid container>
-            <Grid item>
-              <FormLabel>spacing</FormLabel>
+            <Grid item component="fieldset">
+              <FormLabel component="legend">spacing</FormLabel>
               <RadioGroup
                 name="spacing"
                 aria-label="spacing"
diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md
index 578d3a2c7631ac..09cbdd8d55ddfa 100644
--- a/docs/src/pages/components/grid/grid.md
+++ b/docs/src/pages/components/grid/grid.md
@@ -29,17 +29,6 @@ The grid system is implemented with the `Grid` component:
 
 If you are **new to or unfamiliar with flexbox**, we encourage you to read this [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) guide.
 
-## Spacing
-
-The responsive grid focuses on consistent spacing widths, rather than column width.
-Material Design margins and columns follow an **8px** square baseline grid.
-The `spacing` prop value is an integer between 0 and 10 inclusive.
-By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap.
-
-This output transformation function can be customized [using the theme](/customization/spacing/).
-
-{{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}}
-
 ## Fluid grids
 
 Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.
@@ -50,7 +39,7 @@ Column widths are integer values between 1 and 12; they apply at any breakpoint
 
 A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as you can read later in this page). For example, `xs={12}` sizes a component to occupy the whole viewport width regardless of its size.
 
-{{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/BasicGrid.js", "bg": true}}
 
 ### Grid with multiple breakpoints
 
@@ -60,6 +49,17 @@ For example, `xs={12} sm={6}` sizes a component to occupy half of the viewport w
 
 {{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}}
 
+## Spacing
+
+The responsive grid focuses on consistent spacing widths, rather than column width.
+Material Design margins and columns follow an **8px** square baseline grid.
+The `spacing` prop value is an integer between 0 and 10 inclusive.
+By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap.
+
+This output transformation function can be customized [using the theme](/customization/spacing/).
+
+{{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}}
+
 ## Interactive
 
 Below is an interactive demo that lets you explore the visual results of the different settings:
@@ -133,10 +133,16 @@ If used, these props may have undesirable effects on the height of the `Grid` it
 
 ## CSS Grid Layout
 
-Material-UI doesn't provide any CSS Grid functionality itself, but as seen below you can easily use CSS Grid to layout your pages.
+The `Grid` component is using CSS flexbox internally.
+But as seen below, you can easily use [the system](/system/grid/) and CSS Grid to layout your pages.
 
 {{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
 
 ## System props
 
 As a CSS utility component, the `Grid` supports all [`system`](/system/properties/) properties. You can use them as props directly on the component.
+For instance, a padding:
+
+```jsx
+<Grid item p={2}>
+```
diff --git a/docs/src/pages/components/stack/BasicStack.js b/docs/src/pages/components/stack/BasicStack.js
index 3c018e7d1637a1..6ed66a76a73e27 100644
--- a/docs/src/pages/components/stack/BasicStack.js
+++ b/docs/src/pages/components/stack/BasicStack.js
@@ -1,27 +1,23 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-function Cell({ children }) {
-  return (
-    <Paper sx={{ p: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
-
-Cell.propTypes = {
-  children: PropTypes.node,
-};
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function BasicStack() {
   return (
     <div>
       <Stack spacing={2}>
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/BasicStack.tsx b/docs/src/pages/components/stack/BasicStack.tsx
index f76766ebf0fc42..d2e0b465085cad 100644
--- a/docs/src/pages/components/stack/BasicStack.tsx
+++ b/docs/src/pages/components/stack/BasicStack.tsx
@@ -1,22 +1,24 @@
 import * as React from 'react';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import * as CSS from 'csstype';
 
-function Cell({ children }: { children: React.ReactNode }) {
-  return (
-    <Paper sx={{ p: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function BasicStack() {
   return (
     <div>
       <Stack spacing={2}>
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/DirectionStack.js b/docs/src/pages/components/stack/DirectionStack.js
index 3f04367a612a7a..fef22b1d726463 100644
--- a/docs/src/pages/components/stack/DirectionStack.js
+++ b/docs/src/pages/components/stack/DirectionStack.js
@@ -1,27 +1,23 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-function Cell({ children }) {
-  return (
-    <Paper sx={{ padding: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
-
-Cell.propTypes = {
-  children: PropTypes.node,
-};
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function DirectionStack() {
   return (
     <div>
       <Stack direction="row" spacing={2}>
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/DirectionStack.tsx b/docs/src/pages/components/stack/DirectionStack.tsx
index 945c6c09953565..31cafe988d9dfc 100644
--- a/docs/src/pages/components/stack/DirectionStack.tsx
+++ b/docs/src/pages/components/stack/DirectionStack.tsx
@@ -1,22 +1,24 @@
 import * as React from 'react';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import * as CSS from 'csstype';
 
-function Cell({ children }: { children: React.ReactNode }) {
-  return (
-    <Paper sx={{ padding: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function DirectionStack() {
   return (
     <div>
       <Stack direction="row" spacing={2}>
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/DividerStack.js b/docs/src/pages/components/stack/DividerStack.js
index 263183a41698d7..b9e5f836fb39b9 100644
--- a/docs/src/pages/components/stack/DividerStack.js
+++ b/docs/src/pages/components/stack/DividerStack.js
@@ -1,20 +1,16 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-function Cell({ children }) {
-  return (
-    <Paper sx={{ padding: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
-
-Cell.propTypes = {
-  children: PropTypes.node,
-};
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function DividerStack() {
   return (
@@ -24,9 +20,9 @@ export default function DividerStack() {
         divider={<Divider orientation="vertical" />}
         spacing={2}
       >
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/DividerStack.tsx b/docs/src/pages/components/stack/DividerStack.tsx
index 12e978a4d77283..4350650df6f6a6 100644
--- a/docs/src/pages/components/stack/DividerStack.tsx
+++ b/docs/src/pages/components/stack/DividerStack.tsx
@@ -2,14 +2,16 @@ import * as React from 'react';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import * as CSS from 'csstype';
 
-function Cell({ children }: { children: React.ReactNode }) {
-  return (
-    <Paper sx={{ padding: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function DividerStack() {
   return (
@@ -19,9 +21,9 @@ export default function DividerStack() {
         divider={<Divider orientation="vertical" />}
         spacing={2}
       >
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/InteractiveStack.js b/docs/src/pages/components/stack/InteractiveStack.js
index da269ed3b2f59e..acd5bf4fd1b151 100644
--- a/docs/src/pages/components/stack/InteractiveStack.js
+++ b/docs/src/pages/components/stack/InteractiveStack.js
@@ -44,7 +44,7 @@ export default function InteractiveStack() {
               typography: 'body2',
             }}
           >
-            {`Cell ${value + 1}`}
+            {`Item ${value + 1}`}
           </Paper>
         ))}
       </Stack>
diff --git a/docs/src/pages/components/stack/InteractiveStack.tsx b/docs/src/pages/components/stack/InteractiveStack.tsx
index fa42fadc61280b..52f23201f15035 100644
--- a/docs/src/pages/components/stack/InteractiveStack.tsx
+++ b/docs/src/pages/components/stack/InteractiveStack.tsx
@@ -44,7 +44,7 @@ export default function InteractiveStack() {
               typography: 'body2',
             }}
           >
-            {`Cell ${value + 1}`}
+            {`Item ${value + 1}`}
           </Paper>
         ))}
       </Stack>
diff --git a/docs/src/pages/components/stack/ResponsiveStack.js b/docs/src/pages/components/stack/ResponsiveStack.js
index 570647e8afeeba..6219de769c3cda 100644
--- a/docs/src/pages/components/stack/ResponsiveStack.js
+++ b/docs/src/pages/components/stack/ResponsiveStack.js
@@ -1,19 +1,15 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-function Cell({ children }) {
-  return (
-    <Paper sx={{ p: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
-
-Cell.propTypes = {
-  children: PropTypes.node,
-};
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function ResponsiveStack() {
   return (
@@ -22,9 +18,9 @@ export default function ResponsiveStack() {
         direction={{ xs: 'column', sm: 'row' }}
         spacing={{ xs: 1, sm: 2, md: 4 }}
       >
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/ResponsiveStack.tsx b/docs/src/pages/components/stack/ResponsiveStack.tsx
index 96d6eaecaf02a8..64d5dc117ea4f2 100644
--- a/docs/src/pages/components/stack/ResponsiveStack.tsx
+++ b/docs/src/pages/components/stack/ResponsiveStack.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
 import Paper from '@material-ui/core/Paper';
 import Stack from '@material-ui/core/Stack';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import * as CSS from 'csstype';
 
-function Cell({ children }: { children: React.ReactNode }) {
-  return (
-    <Paper sx={{ p: 2, color: 'text.secondary', typography: 'body2' }}>
-      {children}
-    </Paper>
-  );
-}
+const Item = styled(Paper)(({ theme }) => ({
+  // TODO withStyles removal
+  ...(theme.typography.body2 as CSS.Properties),
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
 
 export default function ResponsiveStack() {
   return (
@@ -17,9 +19,9 @@ export default function ResponsiveStack() {
         direction={{ xs: 'column', sm: 'row' }}
         spacing={{ xs: 1, sm: 2, md: 4 }}
       >
-        <Cell>Cell 1</Cell>
-        <Cell>Cell 2</Cell>
-        <Cell>Cell 3</Cell>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Stack>
     </div>
   );
diff --git a/docs/src/pages/components/stack/stack.md b/docs/src/pages/components/stack/stack.md
index e190ca73ad5b4a..90986c32ecf622 100644
--- a/docs/src/pages/components/stack/stack.md
+++ b/docs/src/pages/components/stack/stack.md
@@ -39,3 +39,12 @@ Easily switch `direction` or `spacing` based on the active breakpoint.
 Below is an interactive demo that lets you explore the visual results of the different settings:
 
 {{"demo": "pages/components/stack/InteractiveStack.js", "hideToolbar": true, "bg": true}}
+
+## System props
+
+As a CSS utility component, the `Stack` supports all [`system`](/system/properties/) properties. You can use them as props directly on the component.
+For instance, a margin-top:
+
+```jsx
+<Stack mt={2}>
+```
diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md
index 0775d6cf41c2c1..21f06dea25ce4c 100644
--- a/docs/src/pages/components/typography/typography.md
+++ b/docs/src/pages/components/typography/typography.md
@@ -113,6 +113,11 @@ In addition to using the default typography variants, you can add custom ones, o
 ## System props
 
 As a CSS utility component, the `Typography` supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component.
+For instance, a margin-top:
+
+```jsx
+<Typography mt={2}>
+```
 
 ## Accessibility
 
diff --git a/docs/src/pages/system/grid/grid.md b/docs/src/pages/system/grid/grid.md
index 0a90f33730114e..240af890987611 100644
--- a/docs/src/pages/system/grid/grid.md
+++ b/docs/src/pages/system/grid/grid.md
@@ -1,4 +1,4 @@
-# Grid
+# CSS Grid
 
 <p class="description">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid utilities.</p>
 
@@ -8,7 +8,7 @@ If you are **new to or unfamiliar with grid**, you're encourage to read this [CS
 
 ### display
 
-In order to define a `grid` container you must specify the `display` CSS property to have one of the values: `grid` or `inline-grid`.
+To define a `grid` container, you must specify the `display` CSS property to have one of the values: `grid` or `inline-grid`.
 
 {{"demo": "pages/system/grid/Display.js", "defaultCodeOpen": false, "bg": true}}
 

From 84739628ccc77854479e82e1e018d18c3ba2c802 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 20 Mar 2021 18:48:45 +0100
Subject: [PATCH 2/3] consistency

---
 docs/src/pages/components/grid/NestedGrid.js  | 6 +++---
 docs/src/pages/components/grid/NestedGrid.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/grid/NestedGrid.js b/docs/src/pages/components/grid/NestedGrid.js
index cd5efbe9a97e9f..dda3698b084b1f 100644
--- a/docs/src/pages/components/grid/NestedGrid.js
+++ b/docs/src/pages/components/grid/NestedGrid.js
@@ -16,13 +16,13 @@ function FormRow() {
   return (
     <React.Fragment>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
     </React.Fragment>
   );
diff --git a/docs/src/pages/components/grid/NestedGrid.tsx b/docs/src/pages/components/grid/NestedGrid.tsx
index a93e3bf3f321af..22eb27c7232f5f 100644
--- a/docs/src/pages/components/grid/NestedGrid.tsx
+++ b/docs/src/pages/components/grid/NestedGrid.tsx
@@ -17,13 +17,13 @@ function FormRow() {
   return (
     <React.Fragment>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
       <Grid item xs={4}>
-        <Item>item</Item>
+        <Item>Item</Item>
       </Grid>
     </React.Fragment>
   );

From 9abe79b06baab1dbf25c78d89879bb2bc49482b2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 21 Mar 2021 12:50:30 +0100
Subject: [PATCH 3/3] fix visual issue

---
 docs/src/pages/components/grid/SpacingGrid.js | 39 ++++++++++---------
 .../src/pages/components/grid/SpacingGrid.tsx | 39 ++++++++++---------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js
index e996730068ba08..9f84f1f1d91a26 100644
--- a/docs/src/pages/components/grid/SpacingGrid.js
+++ b/docs/src/pages/components/grid/SpacingGrid.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Grid from '@material-ui/core/Grid';
 import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
@@ -27,24 +28,26 @@ export default function SpacingGrid() {
       <Grid item xs={12}>
         <Paper sx={{ p: 2 }}>
           <Grid container>
-            <Grid item component="fieldset">
-              <FormLabel component="legend">spacing</FormLabel>
-              <RadioGroup
-                name="spacing"
-                aria-label="spacing"
-                value={spacing.toString()}
-                onChange={handleChange}
-                row
-              >
-                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
-                  <FormControlLabel
-                    key={value}
-                    value={value.toString()}
-                    control={<Radio />}
-                    label={value.toString()}
-                  />
-                ))}
-              </RadioGroup>
+            <Grid item>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">spacing</FormLabel>
+                <RadioGroup
+                  name="spacing"
+                  aria-label="spacing"
+                  value={spacing.toString()}
+                  onChange={handleChange}
+                  row
+                >
+                  {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
+                    <FormControlLabel
+                      key={value}
+                      value={value.toString()}
+                      control={<Radio />}
+                      label={value.toString()}
+                    />
+                  ))}
+                </RadioGroup>
+              </FormControl>
             </Grid>
           </Grid>
         </Paper>
diff --git a/docs/src/pages/components/grid/SpacingGrid.tsx b/docs/src/pages/components/grid/SpacingGrid.tsx
index 32abc116a003c3..cebf033b4f1ba4 100644
--- a/docs/src/pages/components/grid/SpacingGrid.tsx
+++ b/docs/src/pages/components/grid/SpacingGrid.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Grid, { GridSpacing } from '@material-ui/core/Grid';
 import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
@@ -27,24 +28,26 @@ export default function SpacingGrid() {
       <Grid item xs={12}>
         <Paper sx={{ p: 2 }}>
           <Grid container>
-            <Grid item component="fieldset">
-              <FormLabel component="legend">spacing</FormLabel>
-              <RadioGroup
-                name="spacing"
-                aria-label="spacing"
-                value={spacing.toString()}
-                onChange={handleChange}
-                row
-              >
-                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
-                  <FormControlLabel
-                    key={value}
-                    value={value.toString()}
-                    control={<Radio />}
-                    label={value.toString()}
-                  />
-                ))}
-              </RadioGroup>
+            <Grid item>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">spacing</FormLabel>
+                <RadioGroup
+                  name="spacing"
+                  aria-label="spacing"
+                  value={spacing.toString()}
+                  onChange={handleChange}
+                  row
+                >
+                  {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
+                    <FormControlLabel
+                      key={value}
+                      value={value.toString()}
+                      control={<Radio />}
+                      label={value.toString()}
+                    />
+                  ))}
+                </RadioGroup>
+              </FormControl>
             </Grid>
           </Grid>
         </Paper>