Как организовать равномерно 5 элементов подряд с помощью системы координат Material-Ui?

Question

Система координат 12, как я могу равномерно разместить 5 элементов подряд? 2.4 не работает ... Заранее спасибо:)

мой код:

    <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

Сделайте ваш Grid container flex прямым к raw и дайте каждому элементу xs={2}, чтобы все они уместились, также вы можете добавить некоторые интервалы и центральные элементы в сам контейнер. Если вы хотите, чтобы каждый элемент был больше 2, подумайте о переносе строки в пользовательский компонент ScrollY

---

   <Grid container spacing={1} direction="row"  justify="center"  alignItems="center" >
    {data.map(item => (
      <Grid item xs={2}}>
        <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
          {item}
        </div>
      </Grid>
    ))}
  </Grid>



// optional ScrollY wrapper, use like <ScrollY> {data.map ...}</ScrollY>

const ScrollY = (props) => 
  <div style={{overflowX:'hidden', overflowY: 'scroll',dispaly:'none', height: '80%'}}>
    {props.children}
  </div>

Answer 2

См. Раздел «Автоматическая разметка» в документах для примера того, как это сделать.

Для вашего кода, я считаю, должно работать следующее:

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