Project 11: CSS Grid Layout Builder

📋 Project Brief

Build a visual CSS Grid layout builder where users can design grid structures by interacting with a GUI, then export the generated CSS code. This project turns an abstract concept (CSS Grid) into a tangible, visual tool.

✅ Feature Requirements

Feature 1: Drag-to-Resize

Acceptance Criteria:

• Users drag column/row boundaries to adjust sizes
• Sizes update in real-time (displayed as fr, px, %, or auto)
• Minimum track size: 50px; snapping at 10px intervals
• Add/remove rows and columns via "+" and "−" buttons

Feature 2: Code Generator

Acceptance Criteria:

• A live code panel shows the CSS output: grid-template-columns, grid-template-rows, gap
• Code updates in real-time as the user adjusts the grid
• "Copy to Clipboard" button with visual confirmation
• Option to export as grid-template-areas syntax

Feature 3: Blueprint Mode

Acceptance Criteria:

• A toggle overlays a coordinate system showing track numbers and line names
• Each cell displays its grid position: row 1 / col 2
• Grid lines are numbered (matching how grid-column-start works)

Feature 4: Implicit Grid Demo

Acceptance Criteria:

• An "Add Extra Items" button adds more items than the explicit grid defines
• Shows how the browser creates implicit rows/columns
• Controls for grid-auto-rows and grid-auto-flow

Feature 5: Fractional Unit Calculator

Acceptance Criteria:

• A visual breakdown shows how fr units distribute available space
• Example: in 1fr 2fr 1fr, show that column 2 gets 50% of space
• Include fixed-width columns in the calculation to show how fr fills remaining space

🧪 Testing Checklist

• Unit test CSS code generation from grid configuration
• Unit test fr distribution calculations
• Integration test: dragging a boundary updates the code panel
• A11y: all interactive elements keyboard-accessible

🚀 Stretch Goals

• Save/load grid presets (e.g., "Holy Grail Layout", "Dashboard")
• Support named grid lines and areas
• Generate responsive grids with media query breakpoints