React Material-UI Cookbook

How it works...

The flex-start value of the justify property aligns all of the Grid items at the start of the container. In this case, the three Chip components in each of the four containers are all crammed to the left of the row. None of the space to the left of the items is filled. Instead of changing the breakpoint property values of these items, which results in changed widths, you can change the justify property value to tell the Grid container how to fill empty spaces.

For example, you could use the center value to align Grid items in the center of the container as follows:

<div className={classes.root}>  <Grid container spacing={4}>    <Grid item xs={12} sm={6} md={3}>      <Paper className={classes.paper}> <Grid container justify="center"> ...