调整网格容器滚动条右偏移，实现自适应网格布局需求

核心实现要点 #

• 蓝色盒子固定尺寸为100px×100px
• 盒子间距（A）通过CSS变量结合clamp()实现动态变化，最小值为10px
• 利用repeat(auto-fit, 100px)让每行自动放置尽可能多的盒子
• 容器内边距（B）通过CSS变量关联为间距A的2倍
• 调整滚动条样式，使滚动条滑块在轨道中居中对齐

完整代码 #

CSS

body {
  overflow: hidden;
}

/* 定义CSS变量：盒子间距、滚动条基础宽度 */
:root {
  --box-gap: clamp(10px, 2.5vw, 30px); /* 最小值10px，随视窗宽度动态调整 */
  --scrollbar-thumb-width: 4px;
}

.container {
  display: grid;
  width: 100%;
  /* 盒子间距使用变量 */
  gap: var(--box-gap);
  overflow-y: auto;
  /* 内边距为间距的2倍，右侧额外预留滚动条空间 */
  padding: 0 calc(var(--box-gap) * 2);
  padding-right: calc(var(--box-gap) * 2 + var(--scrollbar-thumb-width) * 3);
  /* 自动适配每行盒子数量，盒子固定100px宽度 */
  grid-template-columns: repeat(auto-fit, 100px);
  /* 剩余空间居中，保证盒子布局整齐 */
  justify-content: center;
}

/* 滚动条轨道样式，加宽轨道用于居中滑块 */
::-webkit-scrollbar {
  width: calc(var(--scrollbar-thumb-width) * 3);
  background-color: transparent;
}

/* 滚动条滑块样式，通过margin实现居中对齐 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  background-color: var(--scrollbar-color, rgba(0, 0, 0, 0.4));
  width: var(--scrollbar-thumb-width);
  border-radius: 10px;
  /* 左右margin让滑块在轨道中水平居中 */
  margin: 0 calc((var(--scrollbar-thumb-width) * 3 - var(--scrollbar-thumb-width)) / 2);
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <!-- 可添加更多盒子 -->
</div>

代码说明 #

1. 动态间距与内边距关联：用--box-gap变量结合clamp()函数，实现间距在10px到30px之间随视窗宽度自适应调整，容器内边距通过calc(var(--box-gap) * 2)直接关联为间距的2倍，保证两者比例始终一致。
2. 响应式网格布局：repeat(auto-fit, 100px)会自动计算每行可容纳的100px盒子数量，justify-content: center确保当一行无法填满容器宽度时，盒子居中排列，符合「尽可能多放置盒子」的规则。
3. 滚动条居中对齐：通过加宽滚动条轨道宽度，给滑块设置左右margin，让滑块在轨道中水平居中，同时调整容器右侧内边距，避免滚动条遮挡盒子内容。

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