设置MUI网格项之间边距的正确方法

Question

我试图在我的三个网格项目之间获得一些余量。我希望每个网格项占据容器宽度的 1/3。然而，

spacing

和

gap

道具都没有帮助我实现这一目标。

使用

spacing

看起来

spacing

只为每个盒子添加填充。并且内边距仅添加到左侧和顶部。

<Grid container spacing={5} sx={{ width: 800, border: 1 }}>
  <Grid item xs={4} sx={{ backgroundColor: "yellow" }}>
    <div>Box 1</div>
  </Grid>
  <Grid item xs={4} sx={{ backgroundColor: "lightBlue" }}>
    <div>Box 2</div>
  </Grid>
  <Grid item xs={4} sx={{ backgroundColor: "limeGreen" }}>
    <div>Box 3</div>
  </Grid>
</Grid>

使用

gap

gap

在网格项之间创建边距，但将第三个框推出第一行。

<Grid container gap={5} sx={{ width: 800, border: 1 }}>
  <Grid item xs={4} sx={{ backgroundColor: "yellow" }}>
    <div>Box 1</div>
  </Grid>
  <Grid item xs={4} sx={{ backgroundColor: "lightBlue" }}>
    <div>Box 2</div>
  </Grid>
  <Grid item xs={4} sx={{ backgroundColor: "limeGreen" }}>
    <div>Box 3</div>
  </Grid>
</Grid>

我怎样才能实现这样的目标？

我通过将每个网格项设置为占据 3 列而不是 4 列（见下文）来生成此图像。然而，感觉很hacky。有更好的解决方案吗？我也愿意接受不涉及 MUI 网格的解决方案。

<Grid
  container
  justifyContent="space-between"
  sx={{ width: 800, border: 1 }}
>
  <Grid item xs={3} sx={{ backgroundColor: "yellow" }}>
    <div>Box 1</div>
  </Grid>
  <Grid item xs={3} sx={{ backgroundColor: "lightBlue" }}>
    <div>Box 2</div>
  </Grid>
  <Grid item xs={3} sx={{ backgroundColor: "limeGreen" }}>
    <div>Box 3</div>
  </Grid>
</Grid>

Answer 1

为了达到像图像这样的结果，我建议在

Grid

item

内的div中给出背景颜色，并使用填充使其在右侧有一些白色区域（如果你不这样做）想要使用间距，因为它在

Grid

项目周围提供了空间）

  <Grid 
  container sx={{ width: 800, border: 1 }} m={2} 
  // spacing={2} decide if you want extra spacing or not
  >
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "yellow" }}>
        Box 1
      </div>
    </Grid>
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "lightblue" }}>
        Box 2
      </div>
    </Grid>
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "limegreen" }}>
        Box 3
      </div>
    </Grid>
  </Grid>

这是一个codesandbox

Answer 2

尝试使用 MUI

Grid2

的

disableEqualOverflow

import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2

<Grid container spacing={2} disableEqualOverflow m={1}>
</Grid>