react grid

1npm install react-grid-system --save
2
3// yarn
4yarn add react-grid-system 
5
6// example
7import { Container, Row, Col } from 'react-grid-system';
8 
9<Container>
10  <Row>
11    <Col sm={4}>
12      One of three columns
13    </Col>
14    <Col sm={4}>
15      One of three columns
16    </Col>
17    <Col sm={4}>
18      One of three columns
19    </Col>
20  </Row>
21</Container>
22

1//basic grid layout
2import React from 'react';
3import { makeStyles } from '@material-ui/core/styles';
4import Paper from '@material-ui/core/Paper';
5import Grid from '@material-ui/core/Grid';
6
7const useStyles = makeStyles((theme) => ({
8  root: {
9    flexGrow: 1,
10  },
11  paper: {
12    padding: theme.spacing(1), //grid padding
13    textAlign: 'center',
14    color: theme.palette.text.secondary,
15  },
16}));
17
18export default function NestedGrid() { //export default allows for other modules to 
19  //import in the grid function. 
20  //create class based upon class outside of export default. 
21  const classes = useStyles();
22
23  function FormRow() {
24    return ( //return renders the grid
25      <React.Fragment>
26        <Grid item xs={4}>
27          <Paper className={classes.paper}>item</Paper>
28        </Grid>
29        <Grid item xs={4}>
30          <Paper className={classes.paper}>item</Paper>
31        </Grid>
32        <Grid item xs={4}>
33          <Paper className={classes.paper}>item</Paper>
34        </Grid>
35      </React.Fragment>
36    );
37  } //end of function declaration/creation FormRow()
38//usage of formrow element. The declaration above doesn't run. 
39<Grid container spacing={1}>
40  <Grid container item xs={12} spacing={3}>
41    <FormRow />
42  </Grid>
43  <Grid container item xs={12} spacing={3}>
44    <FormRow />
45  </Grid>
46  <Grid container item xs={12} spacing={3}>
47    <FormRow />
48  </Grid>
49</Grid>
50