CSS Grid添加column-gap后超出指定70vw宽度的解决办法咨询

问题原因 #

你设置的三列百分比宽度总和已经接近容器的100%宽度，而Grid布局的column-gap属于列之间的额外追加间距，默认不会被纳入列宽百分比的计算范围：3列布局会产生2个列间距，容器总宽度最终为三列宽度总和 + 2*column-gap，自然就超出了你设定的70vw。同时容器默认的box-sizing: content-box也会让1px的边框额外增加容器总宽度，进一步加剧溢出问题。

推荐解决方案 #

方案1：使用fr单位（最优，无需手动计算）

fr是Grid布局专属的剩余空间分配单位，会自动扣除gap、边框等占用的空间后，再按比例分配容器剩余宽度，直接替换原来的百分比列宽即可：

button{
  width:100%;
}

.grid-container{
  width:70vw;
  border:1px black solid;
  display:grid;
  /* 替换原来的33.3%设置，三等分扣除gap后的剩余空间 */
  grid-template-columns: 1fr 1fr 1fr;
  justify-items:stretch;
  /* 统一盒模型，确保70vw包含边框宽度，避免边框额外撑大容器 */
  box-sizing: border-box;
}

.not-wanted{
  column-gap:10%;
}

方案2：手动计算列宽预留gap空间

如果你需要坚持使用百分比定义列宽，可以提前把gap的占用空间扣除后再分配列宽：
比如你设置了column-gap:10%，2个间距总占用为20%的容器宽度，剩余80%分配给3列，每列宽度为80%/3≈26.67%：

button{
  width:100%;
}

.grid-container{
  width:70vw;
  border:1px black solid;
  display:grid;
  /* 扣除20%的gap总宽度后，三等分剩余80%宽度 */
  grid-template-columns: 26.67% 26.67% 26.67%;
  justify-items:stretch;
  box-sizing: border-box;
}

.not-wanted{
  column-gap:10%;
}

以上两种方案都可以保证容器总宽度严格等于你设定的70vw，不会出现溢出。

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