我试图在我的三个网格项目之间获得一些余量。我希望每个网格项占据容器宽度的 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>
为了达到像图像这样的结果,我建议在
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
尝试使用 MUI
Grid2
的 disableEqualOverflow
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
<Grid container spacing={2} disableEqualOverflow m={1}>
</Grid>