PAYATHON 2026

CSS Grid 使用百分比 gap 时为什么会内容溢出？

数据小许

结论

gap: 10% 5% 使用百分比间距，而 inline-grid 的宽度会根据内容进行固有尺寸计算。在这个计算阶段，百分比间距可能按 0 处理。网格尺寸确定后，浏览器再根据网格容器的内容盒宽度计算间距，实际间距因此会额外增加，导致内容溢出。

fr 会在网格可用空间中分配轨道尺寸，但不能保证百分比间距已计入 inline-grid 的固有宽度。

为什么会溢出

代码中的 gap: 10% 5% 分别设置行间距和列间距，其中列间距 5% 以网格容器的内容盒宽度为基准。display: inline-grid 会让网格参与行内格式化，因此网格宽度通常要根据内容计算，而不是直接填满父容器。

百分比间距和依赖内容的尺寸计算会形成循环关系：计算百分比间距需要先知道网格宽度，但网格宽度又会受到内容和间距的影响。为处理这种情况，固有尺寸计算阶段可能先按零计算百分比间距，等到布局阶段再解析实际值。这样一来，网格实际需要的宽度就可能超过先前估算的宽度。

调整方式

如果不需要百分比间距，通常可以改用固定间距：

.grid {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px 5px;
}

.grid select {
  grid-row: 1 / -1;
}

minmax(0, 1fr) 允许两侧的弹性轨道缩到内容最小宽度以下，有助于处理轨道自身最小尺寸导致的溢出。它无法单独解决百分比 gap 与固有尺寸计算之间的问题，因此示例也将间距改成了固定值。

如果必须使用百分比间距，可以为网格指定明确的宽度，让间距有稳定的百分比基准，例如：

.grid {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10% 5%;
}

.grid select {
  grid-row: 1 / -1;
}

这种做法要求父容器的宽度可以确定。如果父容器的宽度也由内容决定，百分比间距仍可能遇到类似的尺寸计算问题。若要让网格占满父容器，通常可以直接设置网格宽度，而不让 inline-grid 根据内容收缩。

注意事项

示例中的 grid-row: 1 / -1 会让 select 跨越显式网格的全部行。如果仍有溢出，可以暂时移除这项设置，并检查内容的最小尺寸。minmax(0, 1fr) 主要用于处理弹性轨道的最小尺寸，不能自动修正所有子项溢出。

备注：内容仅供参考。