material ui grid xs sm md 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: grid breakpoints material ui

Grid breakpoints Material-UI:
xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

The grid is based on a 12 column system meaning the screen at any
given point has 12 columns of available space. A grid item with sm=6 
will take up half the screen (6 of 12 columns) at screen size small
and larger (width = 600px+).