There's more...

There might be times when hiding the rightmost column makes more sense than trying to accommodate it with the screen width. You can use the Hidden component for this. It's already imported in the example, as follows:

import Hidden from '@material-ui/core/Hidden';

To use it, you wrap the last column with it. For example, here's what the last column looks like now:

<Grid item xs={3}>
  <Grid container direction="column" spacing={2}>
    <Grid item>
      <Paper className={classes.paper}>
        <Typography>Seven</Typography>
      </Paper>
    </Grid>
    <Grid item>
      <Paper className={classes.paper}>
        <Typography>Eight</Typography>
      </Paper>
    </Grid>
  </Grid>
</Grid>

If you want to hide this column at a certain breakpoint, you can wrap the column with Hidden, like this:

<Hidden smDown>
  <Grid item xs={3}>
    <Grid container direction="column" spacing={2}>
      <Grid item>
        <Paper className={classes.paper}>
          <Typography>Seven</Typography>
        </Paper>
      </Grid>
      <Grid item>
        <Paper className={classes.paper}>
          <Typography>Eight</Typography>
        </Paper>
      </Grid>
    </Grid>
  </Grid>
</Hidden>

The smDown property tells the Hidden component to hide its children when the sm breakpoint or lower is reached. Here's what the result looks like at a pixel width of 1000:

The last column is displayed because the sm breakpoint is smaller than the screen size. Here's the result at a pixel screen width of 550, without the last column displayed: