CSS Grid布局下设置margin-bottom导致相邻div高度异常增加问题

问题原因 #

你遇到的现象是Grid布局的默认规则导致的，涉及两个核心知识点：

• 网格行的高度默认由当前行内所有网格项的总占用高度（内容高度+边框+内边距+外边距）的最大值决定
• 网格容器的align-items属性默认值为stretch，会把同一行内的所有网格项拉伸到和当前行高度一致

你给.box-2添加margin-bottom: 100px之后，第一行的总高度就变成了「.box-2的内容高度 + 边框 + 100px下外边距」的总和，而同一行的.box-1因为默认被拉伸，高度自然就跟着行高一起变大了。

解决方案 #

根据你的实际需求选对应的方案即可：

方案1：修改网格项的垂直对齐规则 #

如果你的需求是让同一行的元素顶部/居中/底部对齐，不互相拉伸，给网格容器加align-items配置即可，比如顶部对齐就写：

.container {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items: start; /* 新增，可选值还有center/end等 */
}

修改后.box-1只会保留自身内容高度，.box-2的下外边距只会让自身位置向上偏移，不会影响同列其他元素高度。

方案2：用Grid专属的间距属性控制行间距 #

如果你的需求只是想让两行网格之间有间距，不要给单个网格项加margin，直接用Grid的行间距属性row-gap即可：

.container {
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap: 100px; /* 新增，控制两行网格之间的间距 */
}
/* 删掉.box-2里的margin-bottom:100px规则 */

这个属性是专门为网格布局设计的间距控制属性，不会影响同一行的元素尺寸，也不会出现margin重叠之类的问题。

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