mourner/dead-simple-grid — reverse-engineered prompt

Reverse engineered prompt

Build me a super tiny responsive CSS grid that feels almost invisible, just a simple drop in stylesheet and a demo page showing how to use it. I want it to use only two classes, row and col, with columns stacking to one column on small screens by default, then changing widths with normal CSS media queries as the screen gets wider.

Please keep it mobile first, with fluid columns, fixed gutters, and support for nesting rows inside columns without the spacing getting messed up. The whole point is that people should only need to set widths in percentages for their own layouts, not learn a bunch of extra utility classes. Make the CSS very small and dependency free, and include a clean example page that shows a few common layouts like two columns, three columns, and a nested grid, plus a short explanation of how it works in plain English.

If anything is unclear, look up current CSS behavior online and keep it broadly compatible.

Want more depth? Deep Reverse