react mui grid

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

1npm install @material-ui/core