[docs] Add CSSGrid comparison example (mui#10433)

* [docs] Add CSSGrid comparison example * add flexbox
dhaub-exelixis · Feb 25, 2018 · ea179a1 · ea179a1
1 parent e0a8fbd
commit ea179a1
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 28 deletions.
diff --git a/docs/src/pages/layout/grid/AutoGridNoWrap.js b/docs/src/pages/layout/grid/AutoGridNoWrap.js
@@ -8,7 +8,11 @@ import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
   root: {
-    width: 400,
+    overflow: 'hidden',
+    padding: `0 ${theme.spacing.unit * 3}px`,
+  },
+  wrapper: {
+    maxWidth: 400,
   },
   paper: {
     margin: theme.spacing.unit,
@@ -23,36 +27,38 @@ function AutoGridNoWrap(props) {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Grid container wrap="nowrap">
-          <Grid item>
-            <Avatar>W</Avatar>
-          </Grid>
-          <Grid item xs zeroMinWidth>
-            <Typography noWrap>{message}</Typography>
-          </Grid>
-        </Grid>
-      </Paper>
-      <Paper className={classes.paper}>
-        <Grid container wrap="nowrap">
-          <Grid item>
-            <Avatar>W</Avatar>
-          </Grid>
-          <Grid item xs>
-            <Typography noWrap>{message}</Typography>
+      <div className={classes.wrapper}>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs zeroMinWidth>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
           </Grid>
-        </Grid>
-      </Paper>
-      <Paper className={classes.paper}>
-        <Grid container wrap="nowrap">
-          <Grid item>
-            <Avatar>W</Avatar>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
           </Grid>
-          <Grid item xs>
-            <Typography>{message}</Typography>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography>{message}</Typography>
+            </Grid>
           </Grid>
-        </Grid>
-      </Paper>
+        </Paper>
+      </div>
     </div>
   );
 }

diff --git a/docs/src/pages/layout/grid/CSSGrid.js b/docs/src/pages/layout/grid/CSSGrid.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Typography from 'material-ui/Typography';
+import Paper from 'material-ui/Paper';
+import Divider from 'material-ui/Divider';
+import Grid from 'material-ui/Grid';
+
+const styles = theme => ({
+  container: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, 1fr)',
+    gridGap: `${theme.spacing.unit * 3}px`,
+  },
+  paper: {
+    padding: theme.spacing.unit,
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    whiteSpace: 'nowrap',
+    marginBottom: theme.spacing.unit,
+  },
+  divider: {
+    margin: `${theme.spacing.unit * 2}px 0`,
+  },
+});
+
+function CSSGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Typography variant="subheading" gutterBottom>
+        Material-UI Grid:
+      </Typography>
+      <Grid container spacing={24}>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={8}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </Grid>
+      </Grid>
+      <Divider className={classes.divider} />
+      <Typography variant="subheading" gutterBottom>
+        CSS Grid Layout:
+      </Typography>
+      <div className={classes.container}>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 8' }}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 4' }}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CSSGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CSSGrid);
diff --git a/docs/src/pages/layout/grid/grid.md b/docs/src/pages/layout/grid/grid.md
@@ -47,6 +47,13 @@ That also means you can set the width of one *item* and the others will automati
 
 {{"demo": "pages/layout/grid/AutoGrid.js"}}
 
+## CSS Grid Layout
+
+**CSS Grid Layout** excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
+Unfortunately, CSS grid is only supported by the most recent browsers.
+
+{{"demo": "pages/layout/grid/CSSGrid.js"}}
+
 ## Limitations
 
 ### Negative margin

diff --git a/pages/layout/grid.js b/pages/layout/grid.js
@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/layout/grid/AutoGrid'), 'utf8')
+`,
+        },
+        'pages/layout/grid/CSSGrid.js': {
+          js: require('docs/src/pages/layout/grid/CSSGrid').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/layout/grid/CSSGrid'), 'utf8')
 `,
         },
         'pages/layout/grid/AutoGridNoWrap.js': {