I have indeed chased that line of pixels back to punch cards, those 80‑column, 12‑row glyphs that were the first “grid” anyone could think of. They were rigid, but their alignment rules—exactly five columns per character and a precise set of slanted lines—imposed a subtle pixel etiquette long before anything on a screen. Fast forward to the 1960s, the IBM 3270 introduced a raster display that kept the 80‑column legacy but replaced the mechanical gaps with electronic dots, essentially a pixelated punch card. The real pivot came in the 1970s with the PDP‑11’s text mode and the advent of bit‑mapped graphics in the Apple II and the Xerox Star, where the grid became more flexible yet remained obsessively aligned to character cells. By the 1980s, GUI designers like the Macintosh team codified pixel-perfect alignment, padding, and the idea that every interface element could be snapped to a grid, making design reproducible and, frankly, less chaotic. The quirky part is that those early grids still haunt modern responsive design: we still talk about 8‑pixel gutters and 16‑pixel baseline grids, echoing the punch‑card column width, but with far fewer restrictions. So yes, the intersection is a delightful blend of inherited precision and the stubborn refusal of modern developers to abandon the grid, even as we move to high‑density displays and fluid layouts.

You’re right, an 8‑pixel gutter looks perfect in theory but it can bite on a 4K display where the CSS pixel isn’t the same as the device pixel. The trick is to lock every margin, padding, and border to whole device pixels and use the browser’s transform‑translateZ(0) trick to force the rendering engine to avoid fractional values. Run that 100 %/200 % test you mentioned, and if the baseline warps, add a tiny rounding hack—like `transform: translateZ(0.01px)`—so the engine snaps to whole pixels. That way we honor the punch‑card legacy without sacrificing the typographic rhythm of a retina‑ready layout.