CSS Grid/Flexbox实现3x3点阵 4px点2px间隙小尺寸间距异常求助

问题根因 #

这类小尺寸场景下的间距偏移，本质是两类浏览器渲染逻辑带来的精度误差：

1. 弹性尺寸分配偏差：原Grid实现用repeat(3, 1fr)定义轨道，Flex实现依赖自动换行的默认元素伸缩规则，都会触发浏览器对剩余空间的分数计算。当计算结果包含亚像素值时，不同浏览器会按照自身的舍入规则调整每个元素的位置，最终出现不同位置的间距差值不均匀的情况。
2. 亚像素栅格化偏差：当元素尺寸、位置刚好落在像素渲染边界上时，部分浏览器会将渲染位置偏移0.1-0.5px，在4px圆点、2px间隙这种极小尺寸场景下，这类原本肉眼几乎感知不到的偏移会被放大，明显看出网格歪扭。

修复核心思路 #

彻底取消需要浏览器做弹性计算的尺寸逻辑，所有轨道尺寸、元素尺寸用固定像素值写死，让网格排列的总尺寸与容器内容区尺寸完全匹配，从根源上避免分数计算带来的舍入偏差：

• 把Grid的1fr弹性轨道替换为固定4px的轨道尺寸，不让Grid自动分配剩余空间
• 给Flex布局下的圆点元素设置固定伸缩基准，禁止元素自动拉伸、收缩
• 给容器开启GPU硬件加速，强制浏览器用整数像素做栅格化，消除亚像素渲染带来的位置抖动

修正后的可运行代码 #

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

#flexbox, #grid {
  background: lightgray;
  width: 36px;
  height: 36px;
  padding: 10px;
  margin: 10px;
  /* 开启GPU渲染消除亚像素偏移 */
  transform: translateZ(0);
}

.dot {
  background: gray;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
/* 固定Flex子元素尺寸，禁止弹性伸缩 */
#flexbox .dot {
  flex: 0 0 4px;
}

#grid {
  display: grid;
  /* 替换原有1fr弹性轨道为固定4px尺寸 */
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 2px;
}

<div id="flexbox">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="grid">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

此前尝试方案无效的原因 #

之前试过的justify-content: space-between、margin替代gap、嵌套拆分行等方法，本质上依然依赖浏览器自动计算剩余空间的分配逻辑，只要存在弹性空间计算环节，就依然会触发亚像素舍入的偏差，无法从根源上解决问题。

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