CSS Grid最后一行元素偏移原因咨询（滚动吸附测试场景）

这个问题我之前调试类似布局时也碰到过，核心是滚动容器的空间分配逻辑和Grid尺寸计算的偏差共同导致的，我来帮你拆解清楚：

为什么会出现这个现象？ #

1. 滚动条直接遮挡了容器的padding #

当你给容器设置overflow: scroll时，浏览器会把滚动条绘制在容器的content-box内部——而容器的padding是在content-box和border-box之间的区域。这就意味着，底部和右侧的padding会被滚动条完全挡住：滚动端口（就是你能看到的滚动区域）的边缘就是content-box的边缘，padding在滚动端口的可视范围之外，自然看不到。

2. Grid的尺寸计算没考虑滚动容器的实际可用空间 #

你用100vw来计算列宽，但当垂直滚动条出现时，100vw是包含滚动条宽度的，而滚动容器的实际content-width其实是视口宽度减去滚动条宽度（因为block元素默认宽度是auto，会自动挤压content-width来容纳padding和滚动条）。这种计算偏差导致Grid内容的总宽度/高度超出了容器的实际可滚动区域，再加上scroll-snap-align: start的强制吸附，最后一行/列的元素会直接对齐到滚动端口的边缘，看起来就像是元素向上/向左偏移了1rem（正好是你设置的padding大小）。

怎么修复？ #

1. 修正Grid的尺寸计算逻辑 #

把基于视口的100vw换成容器自身的100%（也就是content-box的宽度），这样列宽会自动适配容器的实际可用空间，避免计算偏差：

.grid {
  /* 列宽：基于容器content-width，减去3列之间的2个gap（1rem*2）后均分3份 */
  grid-template-columns: repeat(10, calc((100% - 2rem) / 3));
  /* 行高：基于容器总高度90vh，减去上下margin的2rem，再减去10行之间的9个gap后均分10份 */
  grid-template-rows: repeat(10, calc((90vh - 2rem - 9rem) / 10));
  /* 其他原有样式保留 */
}

2. 调整padding与scroll-padding的配合 #

为了让滚动时的间距可见，我们可以把容器的内部padding换成scroll-padding来定义吸附间距，同时用容器的margin实现外部间距（这样滚动条就不会遮挡间距了）：

.grid {
  padding: 0; /* 去掉容器内部的padding */
  margin: 1rem; /* 用margin实现外部的1rem间距 */
  scroll-padding: 1rem; /* 保持吸附时元素和滚动端口边缘的1rem间距 */
  /* 其他原有样式保留 */
}

3. 可选：统一盒模型避免布局混乱 #

给所有元素添加box-sizing: border-box，让padding和border都包含在元素的设定尺寸内，后续布局计算会更直观：

* {
  margin: 0;
  box-sizing: border-box;
}

这样调整后，滚动到底部和右侧时，scroll-padding会让元素和滚动端口边缘保持1rem的间距，滚动条也不会遮挡原本的间距区域，最后一行/列元素的偏移问题就解决了。

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