material ui space Grid container code example
Example 1: react mui grid
//basic grid layout
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(1), //grid padding
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
export default function NestedGrid() { //export default allows for other modules to
//import in the grid function.
//create class based upon class outside of export default.
const classes = useStyles();
function FormRow() {
return ( //return renders the grid
<React.Fragment>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</React.Fragment>
);
} //end of function declaration/creation FormRow()
//usage of formrow element. The declaration above doesn't run.
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
</Grid>
Example 2: react grid
npm install react-grid-system --save
// yarn
yarn add react-grid-system
// example
import { Container, Row, Col } from 'react-grid-system';
<Container>
<Row>
<Col sm={4}>
One of three columns
</Col>
<Col sm={4}>
One of three columns
</Col>
<Col sm={4}>
One of three columns
</Col>
</Row>
</Container>