// the find
sdras/cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
A visual drag-and-drop tool that generates CSS Grid boilerplate. You configure column and row counts with their units, drag across cells to define named areas, and it spits out the corresponding CSS and HTML. Aimed at developers who know what they want visually but don't want to type out repeat() and grid-area declarations by hand.
The drag-to-define-areas interaction maps directly to how CSS Grid actually works, making it a decent teaching aid, not just a shortcut. Internationalization is present with six languages in the i18n folder, which is more effort than most small tools bother with. It's a single-page Vue app with no backend — fully static, trivially self-hostable or forkable. The generated code is clean and doesn't add framework-specific cruft.
Only covers the basics: no subgrid, no auto-placement, no minmax() or fit-content(), no named lines beyond areas. If your grid is anything more complex than a simple template layout, you'll hit the ceiling fast. The project is functionally frozen — the last real development was years ago and open issues/PRs aren't being merged. The entire app state lives in a single store.js with no tests beyond one utility spec, so contributing without breaking things is harder than it looks.