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

问题描述 投票:0回答:2

我试图在我的三个网格项目之间获得一些余量。我希望每个网格项占据容器宽度的 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>
css material-ui css-grid
2个回答
0
投票

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

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


0
投票

尝试使用 MUI

Grid2
disableEqualOverflow

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

<Grid container spacing={2} disableEqualOverflow m={1}>
</Grid>
© www.soinside.com 2019 - 2024. All rights reserved.