网格宽/高为奇数像素时出现间隙的技术问题咨询

兄弟我太懂这种被像素级小bug逼疯的滋味了！你遇到的这个网格区块间的细微间隙，本质是奇数像素尺寸导致的亚像素渲染问题：当浏览器计算网格项的宽/高得到非整数像素时，会用半透明的抗锯齿算法处理边界，和你的红色背景叠加后，就显现出了看起来像“间隙”的效果。

下面给你几个实用的解决思路，亲测有效：

• 确保网格项尺寸为整数像素
  这是最根本的解决方法。比如你的网格容器宽75px、高85px，如果你用的是均匀分布的网格（比如3列3行），那75/3=25px（整数，没问题），但85/3≈28.333px（非整数，这就是问题来源）。你可以手动分配行高，让每行都是整数：

  .grid {
    display: grid;
    width: 75px;
    height: 85px;
    /* 3列固定25px，3行分配为28+29+28=85px，都是整数 */
    grid-template-columns: repeat(3, 25px);
    grid-template-rows: 28px 29px 28px;
    grid-gap: 0; /* 务必确保没有默认间隙 */
  }
  

• 开启硬件加速消除亚像素锯齿
  给网格容器添加transform: translateZ(0)，让浏览器用GPU渲染，能有效解决亚像素抗锯齿导致的视觉间隙：

  .grid {
    /* 其他属性不变 */
    transform: translateZ(0);
  }
  

• 避免使用百分比/fr的自动分配（如果可能）
  如果你用fr单位让网格自动分配空间，在奇数尺寸下很容易出现非整数像素。优先用固定整数尺寸或者能被容器尺寸整除的比例，从源头避免亚像素计算。

• 极端情况的hack方案
  如果上面的方法都不管用，可以试试给网格项添加1px的负外边距（margin: -1px），或者给容器加overflow: hidden，不过这属于应急手段，优先用前面的方法更稳妥。

按照上面的方法调整后，你就能实现中间清晰、边缘半透明的Grid布局，同时彻底消除那些烦人的细微间隙了！

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