CSS grid布局最右列出现多余间隙如何解决

右侧多余的列间隙是代码逻辑冲突导致的，和Grid本身的间隙规则无关：

• Grid子项默认自带stretch对齐效果，会自动撑满分配到的网格单元格，你手动给子项加width: 100%会和gap的宽度计算逻辑冲突，子项总宽度超出容器后，多余的空间就会被挤到最右侧形成假间隙。
• 你写了grid-template-areas定义布局区域，但没有给对应类名的子项绑定grid-area属性，部分浏览器的自动布局算法会额外生成匿名网格轨道，也会产生多余间隙。

• 移除.img-gallery div上的width: 100%属性，不需要手动给Grid子项设置宽度。
• 简单三列布局不需要冗余的grid-template-areas、grid-template-rows: auto属性，直接删除即可减少计算出错概率；如果要保留区域定义写法，需要给三个子项分别绑定对应的区域名。
• 将非标准的旧属性grid-column-gap替换为标准属性column-gap，避免浏览器兼容问题。
• 全局设置box-sizing: border-box，清除浏览器默认边距带来的宽度计算误差。

修复后CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.img-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 30px;
}

.img-gallery div {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

修复后HTML代码（原结构无需改动） #

<div class="container">
  <div class="img-gallery">
    <div class="img-1" style="background-image: url(images/img-1);"></div>
    <div class="img-2" style="background-image: url(images/img-2);"></div>
    <div class="img-3" style="background-image: url(images/img-3);"></div>
  </div>
</div>

如果需要保留grid-template-areas的写法，只需要在CSS中追加三行区域绑定代码即可，不需要修改其他部分：

.img-1 { grid-area: img-1; }
.img-2 { grid-area: img-2; }
.img-3 { grid-area: img-3; }

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