如何弥补CSS Grid列宽设置中gap引发的尺寸间隙问题？

试试用Grid的fr单位特性来绕开calc()——fr会自动扣除gap宽度后分配剩余空间，完美适配你的需求。

最优方案（无calc） #

给Grid容器套一个父容器实现滚动，利用inline-grid和fr自动分配宽度：

CSS

body {
  margin: 0;
}

.grid-container {
  overflow-x: auto;
}

.grid {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2em;
  background-color: rgba(250, 0, 0, .2);
}

.column {
  background-color: rgba(50, 0, 250, .2);
  padding: 1em;
}

HTML

<div class="grid-container">
  <div class="grid">
    <div class="column">slide 1</div>
    <div class="column">slide 2</div>
    <div class="column">slide 3</div>
    <div class="column">slide 4</div>
    <div class="column">slide 5</div>
    <div class="column">slide 6</div>
  </div>
</div>

为什么这样有效

• inline-grid让Grid容器宽度等于所有列的总宽度，列数超过5时会超出父容器，触发横向滚动
• repeat(5, 1fr)会把父容器的可用宽度（100% 减去4个gap的宽度）平均分成5份，每列占1份，刚好填满父容器
• grid-auto-columns: 1fr确保新增列和已有列宽度一致，保持布局统一

替代方案（少量calc，无需额外父容器） #

如果不想多套一层容器，用calc()直接计算列宽也很直观：

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 2em) / 5);
  gap: 2em;
  overflow-x: auto;
  width: 100%;
  background-color: rgba(250, 0, 0, .2);
}

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