复刻Grid CSS时遇subpixel rendering导致1px竖线模糊问题求助

• 我在复刻OCTICONS网站的Grid相关CSS时，碰到个棘手问题：在Chrome或Edge浏览器里调整窗口宽度，布局中的1px竖线会出现失真模糊，和原网站的表现完全不一样。
• 观察下来应该是*亚像素渲染（subpixel rendering）*导致的：我的实现里，窗口宽度每变化1px，内部元素就会偏移0.5px，线条因此模糊；但原网站在窗口宽度变化时，会自动忽略这0.5px的偏移，始终保证1px线条清晰显示。
• 我已经试过Stack Overflow上各种CSS和JavaScript解决方案，全都没用。
• 有没有人能通过我提供的Codepen示例复现这个问题，然后给出解决办法？

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