Question

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

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

我快到了，但是工作日之间没有间隔（嵌套在Typography组件中）。相反，尽管我指定了间距，但它会折叠空间。

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

在此处查看codeandbox：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 container spacing={12}>
  <Grid item xs={2}>

请参阅文档和演示material-ui / grid / spacing
和相关的答案here

MUI网格项之间的间距

1 个答案: