diff --git a/docs/src/pages/layout/grid/ComplexGrid.js b/docs/src/pages/layout/grid/ComplexGrid.js new file mode 100644 index 00000000000000..4a05737b7c9ffb --- /dev/null +++ b/docs/src/pages/layout/grid/ComplexGrid.js @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Grid from '@material-ui/core/Grid'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import ButtonBase from '@material-ui/core/ButtonBase'; + +const styles = theme => ({ + root: { + flexGrow: 1, + maxWidth: 600, + padding: theme.spacing.unit * 2, + }, + image: { + width: 128, + height: 128, + }, + img: { + margin: 'auto', + display: 'block', + maxWidth: '100%', + maxHeight: '100%', + }, +}); + +function ComplexGrid(props) { + const { classes } = props; + return ( + + + + + complex + + + + + + + Standard license + + Full resolution 1920x1080 • JPEG + ID: 1030114 + + + Remove + + + + $19.00 + + + + + ); +} + +ComplexGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ComplexGrid); diff --git a/docs/src/pages/layout/grid/InteractiveGrid.js b/docs/src/pages/layout/grid/InteractiveGrid.js index fdbd5c3ce7efce..b5412ce92f710d 100644 --- a/docs/src/pages/layout/grid/InteractiveGrid.js +++ b/docs/src/pages/layout/grid/InteractiveGrid.js @@ -67,11 +67,12 @@ class InteractiveGrid extends React.Component { - - + + direction - + justify } label="space-around" /> + } + label="space-evenly" + /> - + alignItems ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing.unit, + textAlign: 'center', + color: theme.palette.text.secondary, + }, +}); + +function FormRow(props) { + const { classes } = props; + + return ( + + + item + + + item + + + item + + + ); +} + +FormRow.propTypes = { + classes: PropTypes.object.isRequired, +}; + +function NestedGrid(props) { + const { classes } = props; + + return ( +
+ + + + + + + + + + + +
+ ); +} + +NestedGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(NestedGrid); diff --git a/docs/src/pages/layout/grid/grid.md b/docs/src/pages/layout/grid/grid.md index d31d361d7d5f2d..00ced9299657b2 100644 --- a/docs/src/pages/layout/grid/grid.md +++ b/docs/src/pages/layout/grid/grid.md @@ -63,6 +63,22 @@ Unfortunately, CSS grid is only supported by the most recent browsers. {{"demo": "pages/layout/grid/CSSGrid.js"}} +## Nested Grid + +The `container` and `item` properties are two independant boolean. They can be combined. + +> A flex **container** is the box generated by an element with a computed display of `flex` or `inline-flex`. In-flow children of a flex container are called flex **items** and are laid out using the flex layout model. + +https://www.w3.org/TR/css-flexbox-1/#box-model + +{{"demo": "pages/layout/grid/NestedGrid.js"}} + +## Complex Grid + +The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts. + +{{"demo": "pages/layout/grid/ComplexGrid.js"}} + ## Limitations ### Negative margin diff --git a/pages/layout/grid.js b/pages/layout/grid.js index 806a99182bdd18..a83b84a16252b9 100644 --- a/pages/layout/grid.js +++ b/pages/layout/grid.js @@ -48,6 +48,20 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/layout/grid/CSSGrid'), 'utf8') +`, + }, + 'pages/layout/grid/NestedGrid.js': { + js: require('docs/src/pages/layout/grid/NestedGrid').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/layout/grid/NestedGrid'), 'utf8') +`, + }, + 'pages/layout/grid/ComplexGrid.js': { + js: require('docs/src/pages/layout/grid/ComplexGrid').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/layout/grid/ComplexGrid'), 'utf8') `, }, 'pages/layout/grid/AutoGridNoWrap.js': { diff --git a/static/images/grid/complex.jpg b/static/images/grid/complex.jpg new file mode 100644 index 00000000000000..f4d00712b8355c Binary files /dev/null and b/static/images/grid/complex.jpg differ