如何解决CSS Grid布局中无法消除行内多余margin的问题

你的布局出现无法消除的多余间距，核心有两个原因：

• 你给网格容器#main设置了justify-items: start和align-items: start，这两个属性会让网格子项.child仅按照自身内容宽高渲染，不会自动填满整个网格单元格，单元格内剩余的空白就会表现为无法消除的多余行内边距
• 浏览器默认样式中<p>标签自带上下外边距，也会导致卡片内部纵向间距不符合预期

解决方案 #

先删除网格容器的两个对齐属性，让子元素自动填满网格单元格，再按需调整内部元素间距即可，修改后的完整代码如下：

CSS代码

/* 全局重置默认边距，消除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    margin: 10px;
    grid-auto-rows: minmax(100px, auto);
    /* 移除原来的align-items: start和justify-items: start，默认值stretch会让子项自动填满单元格 */
}

.child{
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px;
}

/* 统一设置卡片内部相邻元素的纵向间距，按需调整数值即可 */
.child > * + * {
  margin-top: 8px;
}

.child img{
    border-radius: 10px;
    width: 50%;
}

效果说明

修改后所有.child元素会自动填满对应的网格单元格，grid-gap设置的就是各个卡片之间的间距，不会再出现多余空白。如果需要单独调整某类内部元素的边距，直接给对应元素加margin规则即可。

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