React Material-UI Cookbook

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 ...