I attempted to replicate the CSS related to the Grid on the page below, but I discovered an issue where a 1px vertical line becomes distorted when resizing the window width in Chrome or Edge browsers, differing from the original site.
Original site link: OCTICONS
This issue seems to be related to subpixel rendering, where the web browser window's internal display only moves by 0.5px for every 1px change in window width, causing this distortion. On the original site, despite the window width changing by 1px, it ignores the 0.5px rendering and ensures that only 1px is rendered.
Many solutions on Stack Overflow using CSS and JavaScript were ineffective.
If anyone has successfully replicated and resolved this issue through the provided Codepen, please respond.