How do I organise 5 items evenly in a row with material-ui's grid system?

Question

The grid system is 12, how can I evenly put 5 items in a row? 2.4 doesn't work... Thanks in advance :)

my code:

    <Grid container spacing={10}>
        {data.map(item => (
          <Grid item xs={12} md={2.4}>
            <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
              {item}
            </div>
          </Grid>
        ))}
      </Grid>

Answer 1

See the Auto Layout section from the docs for an example of how to do this.

For your code, I believe the following should work:

<Grid container spacing={10}>
  {data.map(item => (
    <Grid item xs={12} md>  // should also add a "key" prop here
      <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
        {item}
      </div>
    </Grid>
  ))}
</Grid>