CSS Grid App Maker

A small Next.js app for sketching CSS Grid layouts. Drag items, edit grid settings, export CSS or JSON, and share links with the layout embedded.

Features

• Undo/Redo via Zustand history (Ctrl/⌘+Z, Shift+Ctrl/⌘+Z or Ctrl/⌘+Y)
• Import/Export with Zod validation (safe JSON)
• Cleaner CSS export (line placement or grid-template-areas)
• Template Areas panel with copy
• Canvas rulers (row/column indices)
• Local persistence with Zustand persist
• Keyboard controls and basic a11y
• Snap/drag behavior
• Subgrid mode with nested editing
• Presets and shareable URLs (compressed into the hash)
• Contrast checks warning for low text/background contrast

Quick start

pnpm install
pnpm dev
# or: npm install && npm run dev

Open http://localhost:3000

How to use

• Edit rows, columns, gaps, and templates in the left panel.
• Drag items on the canvas. Use arrow keys to nudge the focused item (hold Shift for larger steps).
• Undo/Redo from the header or use shortcuts.
• Export JSON or Import JSON from the header.
• Click Share to copy a link with the layout in the URL hash.
• Use Template Areas to copy area-based CSS.
• Make Subgrid on an item, then Enter Subgrid to edit its nested layout. Use Back to return.

Keyboard shortcuts

• Undo: Ctrl/⌘+Z
• Redo: Shift+Ctrl/⌘+Z or Ctrl/⌘+Y
• Nudge: Arrow keys (hold Shift to step faster)
• Focus: Tab between items

Files to know

• components/grid-generator.tsx – page shell, header actions, panels
• components/grid-canvas.tsx – canvas, rulers, drag, keyboard
• components/grid-controls.tsx – controls, item editor, contrast checks
• components/code-output.tsx – CSS/HTML/React output
• components/grid-areas-editor.tsx – template areas view
• hooks/use-grid-store.ts – Zustand store (history, persist, subgrid)
• lib/serialization.ts – Zod schema, import/export helpers

Notes

• Layouts are stored locally; Reset returns to defaults.
• CSS export assumes your own naming for item classes.