Grid System —
Layout Debugger
A Manifest V3 Chrome extension that overlays a customizable column grid on any live website — built for frontend developers and published on the Chrome Web Store with 4,000+ users and 5-star ratings.
Year
2024
Industry
Developer Tools
Client
Open Source
Duration
Personal Project
01 —Problem
Eyeballing your grid layout gets old fast
Frontend developers spend a surprising amount of time just trying to verify that what they've built actually lines up with the design. Column grids, gutters, spacing — it's the kind of thing that looks fine until you hold it up against the real layout system and realize something's slightly off. Most developers were either toggling design tool overlays back and forth, using browser devtools in ways they weren't really built for, or just squinting at the screen and hoping for the best.
The tools that did exist for this were either bloated with features nobody needed, locked behind a subscription, or simply not built for the specific job of validating a column-based grid on a live site. There was a clear gap for something simple, fast, and purpose-built.
02 —Agitation
A small friction point that adds up across every project
It's not a dramatic problem — nobody's losing sleep over grid validation. But it's the kind of thing that slows you down on every single project, every single time you need to check your layout. Toggle to the design file, squint at the spacing, switch back to the browser, adjust, repeat. Multiply that across a full UI build and it's a genuinely annoying chunk of time spent on something that should take seconds.
The fact that nothing lightweight and free existed for this meant most developers just lived with the friction. That felt like the exact kind of problem worth solving.
03 —Solution
A grid overlay, right where you need it
I built Grid System as a Manifest V3 Chrome extension — a lightweight tool that injects a fully customizable column grid overlay directly onto any live website. Columns, gutters, and visibility are all configurable to match whatever design system you're working with, and the overlay is non-intrusive enough that you can keep it on while you work without it getting in the way. No subscriptions, no setup, no bloat — just open the extension and your grid is there.
It grew to 4,000+ users entirely through organic discovery and word of mouth in developer communities — no marketing, no launch campaign. The 5-star ratings on the Chrome Web Store came from developers who found exactly what they were looking for and nothing they weren't. Sometimes the best product decision is knowing what to leave out.
04 —Summary
4,000+ developers, zero marketing budget
Building a tool to scratch your own itch and watching 4,000 other developers find it useful is one of the more satisfying things in this work. Grid System is still live, still growing, and still doing exactly one thing really well.