There's more...

You can use the auto value for every breakpoint value if you're unsure of which value to use:

<div className={classes.root}>
  <Grid container spacing={4}>
    <Grid item xs="auto" sm="auto" md="auto">
      <Paper className={classes.paper}>
        xs=auto sm=auto md=auto
      </Paper>
    </Grid>
    <Grid item xs="auto" sm="auto" md="auto">
      <Paper className={classes.paper}>
        xs=auto sm=auto md=auto
      </Paper>
    </Grid>
    <Grid item xs="auto" sm="auto" md="auto">
      <Paper className={classes.paper}>
        xs=auto sm=auto md=auto
      </Paper>
    </Grid>
    <Grid item xs="auto" sm="auto" md="auto">
      <Paper className={classes.paper}>
        xs=auto sm=auto md=auto
      </Paper>
    </Grid>
  </Grid>
</div>

This will try to fit as many items as possible on each row. As the screen size changes, items are rearranged so that they fit on the screen accordingly. Here's what this looks like at a screen width of 725 pixels:

I would recommend replacing auto with a value from 1–12 at some point. The auto value is good enough that you can get started on other things without worrying too much about layout, but it's far from perfect for your production app. At least by setting up auto this way, you have all of your Grid components and breakpoint properties in place. You just need to play with the numbers until everything looks good.