MUI 网格项目之间的间距

Question

我正在创建大致如下的网格布局：

Mon   Tue   Wed   Thu
This is a very very very very very very very very ...                          11.11% achieved

我已经快到了，但无法获得工作日之间的间距（嵌套在版式组件内）。相反，尽管我指定了间距，但它会折叠空间。

这是我的代码。如何控制工作日之间的间隔？

请参阅此处的codesandbox：https ://codesandbox.io/s/material-ui-playground-vn9p6

<Grid container justify="space-between" alignItems="center">
  <Grid item xs={9} container direction="column" spacing={1}>
    <Grid item container spacing={4}>
      <Grid item>
        <Typography variant="caption">Man</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Tir</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Ons</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Tor</Typography>
      </Grid>
    </Grid>

    <Grid item xs>
      <Typography variant="title" noWrap>
        Here is a really really really really really really really really
        really really really really long title
      </Typography>
    </Grid>
  </Grid>

  <Grid item xs={3} container justify="flex-end">
    <Grid item>
      <Typography variant="body">11.11% achieved</Typography>
    </Grid>
  </Grid>
</Grid>

Answer 1

请注意，这个答案只是身份验证演示的调试解决方案。

基本上添加xs到子网格组件中，Grid item以便您定义每个项目的宽度适合您的间距需求

<Grid item container spacing={12}>
  <Grid item xs={2}>

参考文档和演示材料-ui/grid/spacing
和相关答案在这里