CSS Grid设置column-gap后父容器溢出，如何实现Bootstrap式12列自适应网格

问题根因 #

你遇到的溢出问题根因是Grid的gap属于列外额外占用的空间，不会被fr分配逻辑计算到列宽里。你当前设置gap:40px，12列网格共有11个列间隙，总间隙宽度为440px，已经超过了你给父容器设置的300px最大宽度，就算所有列宽压缩到0，网格整体宽度还是440px，必然出现横向溢出。

解决方案 #

以下两种方案都可以保留12列网格结构、子元素占位配置规则不变的前提下解决问题：

方案1：严格保留固定像素列间距

如果必须使用固定像素的原生间隙，可通过最小宽度限制+媒体查询适配避免溢出：

.parent {
  max-width: 1200px; /* 建议调整为不小于最小总间隙的数值 */
  height: 500px;
  overflow: auto;
  border: 1px solid blue;
}

.box {
  grid-column: span 6 / span 6;
  background: red;
  height: 40px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px;
  /* 新增：保证容器最小宽度不小于总间隙宽度 */
  min-width: calc(11 * 40px);
}

/* 小屏幕适配，缩小间隙值避免总间隙超过屏幕宽度 */
@media (max-width: 768px) {
  .grid {
    gap: 16px;
    min-width: calc(11 * 16px);
  }
}

方案2：内边距模拟间隙（和Bootstrap栅格逻辑一致，无溢出风险）

如果接受用内边距模拟视觉上的固定间隙，可以彻底避免间隙导致的溢出问题，不用做断点适配：

.parent {
  max-width: 300px;
  height: 500px;
  overflow: auto;
  border: 1px solid blue;
  /* 新增：抵消网格容器的负边距 */
  padding-inline: 20px;
}

.box {
  grid-column: span 6 / span 6;
  background: red;
  height: 40px;
  /* 新增：列左右内边距作为间隙 */
  padding-inline: 20px;
  /* 如果需要内容区域不带内边距，给内部内容套一层div即可 */
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* 取消gap，改用负边距抵消最左最右列的内边距 */
  margin-inline: -20px;
}

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