如何在Material UI中设置网格项间距且不破坏布局？

想给Grid组件里的内容框设置自动间距，但添加rowSpacing/columnSpacing或margin/padding属性都会破坏现有布局，达不到原生CSS Grid中column-gap和row-gap的效果。

<Grid xs={12} sm={12} lg={10} container className={`${styles.Item} ${styles.Item3}`}>
  <Grid xs={12} sm={6} lg={4}>
    Content 1
  </Grid>
  <Grid xs={12} sm={6} lg={4}>
    Content 2
  </Grid>
  <Grid xs={12} sm={6} lg={4}>
    Content 3
  </Grid>
  <Grid xs={12} sm={6} lg={4}>
    Content 4
  </Grid>
  <Grid xs={12} sm={6} lg={4}>
    Content 5
  </Grid>
  <Grid xs={12} sm={6} lg={4}>
    Content 6
  </Grid>
</Grid>

• 原始布局：
  
• 添加rowSpacing={5}、columnSpacing={5}后的布局：
  
• 添加margin属性后的布局：
  

方法1：改用原生CSS Grid布局（推荐） #

MUI的Grid Container默认是Flex布局，rowSpacing/columnSpacing本质是给子项加margin，容易导致布局溢出。改用原生CSS Grid的gap属性可以完美解决：

1. 先写自定义CSS样式：

.custom-grid-container {
  display: grid !important;
  /* 大屏（lg）下3列，预留间距空间 */
  grid-template-columns: repeat(auto-fit, minmax(calc(100%/3 - 10px), 1fr));
  gap: 16px; /* 自定义间距大小 */
}

/* 平板（sm）下2列 */
@media (max-width: 900px) and (min-width: 600px) {
  .custom-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 8px), 1fr));
  }
}

/* 手机（xs）下1列 */
@media (max-width: 600px) {
  .custom-grid-container {
    grid-template-columns: 1fr;
  }
}

2. 修改组件代码，给外层Grid添加自定义类名，同时简化子项的响应式配置：

<Grid xs={12} sm={12} lg={10} container className={`${styles.Item} ${styles.Item3} custom-grid-container`}>
  <Grid>Content 1</Grid>
  <Grid>Content 2</Grid>
  <Grid>Content 3</Grid>
  <Grid>Content 4</Grid>
  <Grid>Content 5</Grid>
  <Grid>Content 6</Grid>
</Grid>

这个方法完全基于原生CSS Grid的gap，间距是容器内部的，不会破坏整体布局。

方法2：修正MUI Grid的margin溢出问题 #

如果不想改布局结构，可以给外层Grid加spacing属性，再给子项抵消默认margin带来的影响：

<Grid xs={12} sm={12} lg={10} container spacing={2} className={`${styles.Item} ${styles.Item3}`}>
  <Grid xs={12} sm={6} lg={4} sx={{ padding: 0, margin: 0 !important }}>Content 1</Grid>
  <Grid xs={12} sm={6} lg={4} sx={{ padding: 0, margin: 0 !important }}>Content 2</Grid>
  {/* 其他子项同理 */}
</Grid>

这种方法是针对性修正，适合不想改动整体布局的场景，但不如方法1干净。

内容的提问来源于stack exchange，提问作者Quan Phung