Create customizable grid overlays for level design or UI wireframes
Use the sliders and controls in the Grid Settings panel to customize your grid:
The preview area shows your grid in real-time as you adjust the settings. Click "Update Grid" to apply any changes you've made.
Once you're happy with your grid, you can:
Create grids with exact dimensions and divisions for pixel-perfect designs and layouts.
Choose between line grids for simple layouts, cell grids for block planning, or dot grids for more subtle guides.
Adjust colors, opacity, and line thickness to create grids that work best for your specific needs.
Get your grid in formats that work with all major design and development tools.
This web-based tool works in any modern browser with no downloads or installations needed.
These grids are perfect for UI/UX design, game level design, web development, graphic design, and any project where precise layout planning is needed.
Lines Only shows just the dividing lines, Cells shows filled cells with borders, and Dots shows intersection points only.
Currently the tool only creates rectangular grids, but you can set different numbers of rows and columns to create rectangular cell patterns.
Opacity controls let you create subtle guide grids that don't overpower your actual design work when placed as overlays.
The maximum grid size is 2000x2000 pixels, which should be sufficient for most design purposes.