Pure CSS Responsive Grid Overlay
Andreas Larsen
201

This is awesome. I’ve been doing something like this for years for grid columns and also for vertical rhythm.

I wish I had better pictures at the moment but the way you approached this is nearly identical. You can see hints of the columns and the cell grouping.

The way I handled widths was a bit different however cause I had fixed columns and fluid left and right gutters which took up remaining space so I was able to size things so they were super thin on retina displays but would render as a single pixel depending on the screen density.

One other notable thing I did was add mix-blend-mode: difference so the grid lines were always visible and just had a quick toggle via JS to turn that on and off.

Nice work! I’m excited to look more into what you’ve done!