How it works...

There's a lot going on with this example, so let's start by taking a look at just the first item in the Grid code:

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

The Grid item is using an xs value of 4, to create the four-column layout. Essentially, these items are columns. Next, you have a nested Grid container. This container has a direction property value of column. This is where you can place the Grid items that belong in this column, and they'll flow from top to bottom, instead of from left to right. Each column in this grid follows this pattern.