Grid Area ASCII Art Generator

Draw your website layout using a pixel-art style grid and output grid-template-areas code. Upload a wireframe to trace over it.
Rows
Cols
Drag to paint. The first area (.) is generic empty space.

Features

  • Visual Grid Painting: Draw your CSS Grid layout intuitively using a pixel-art interface.
  • Image Tracing: Upload a wireframe or design mockup to trace your grid directly over it.
  • CSS Generation: Automatically generates the grid-template-areas CSS code.
  • Custom Areas: Create and name as many grid areas as you need with custom colors.

How to Use

  1. Set the numbers of Rows and Columns for your grid.
  2. (Optional) Upload a background image to trace over using the "Wireframe Trace" panel.
  3. Add new areas in the "Area Palette" (e.g., "header", "sidebar").
  4. Select an area and click/drag on the grid to paint the cells.
  5. Copy the generated CSS code from the bottom panel.