Use the free Grid Overlay Preview below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why designs look aligned but are not
A design can feel slightly wrong without an obvious flaw. A button sits three pixels lower than its neighbour. A card edge misses the text column by a few pixels. A headline starts a little left of the paragraph below it. Each error is tiny, but together they make a design feel unpolished, and visitors sense the sloppiness even when they cannot name it.
The Grid Overlay Preview above catches those errors before anyone else sees them. You upload a screenshot of a design, lay a grid of columns and rows over it, and check whether edges line up with the grid lines. If they do not, you have found a real alignment problem, not a vague feeling.
How to check a design
Upload a screenshot of the page, poster or app screen you want to check. A full-page screenshot works best, because a cropped image hides the relationships between sections. Then set the column count to match the grid your design should follow, often six or twelve for web pages, and set the row count to split the page into horizontal bands.
Adjust the opacity until the grid is visible without hiding the design beneath it. Around seventy percent is a good starting point: strong enough to judge alignment, light enough to see the content. Now scan the design systematically. Check that headlines, body text and buttons in the same section share a left edge. Check that cards in a row share a top edge and a bottom edge. Check that images and text blocks respect the same margins on both sides.
Every edge that misses a grid line by more than a couple of pixels is worth fixing, unless it is a deliberate break, such as a full-width image that intentionally escapes the grid. Intentional breaks should be obvious and bold. Accidental breaks look like mistakes precisely because they are small.
What to check beyond columns
Alignment is only half the story. Use the rows to check vertical rhythm: the space between sections should be consistent, not random. If one section gap is 40 pixels and the next is 90, the page rhythm stutters. Check that repeated elements, such as cards or list items, use identical internal spacing. Check that icons align with the text beside them, since icon-text misalignment is one of the most common small errors in app design.
Also check margins. Content that touches the screen edge on one side but not the other looks unbalanced, and the grid overlay makes that asymmetry visible immediately. Finally, try the demo layout included in the tool if you want to practise: it contains coloured blocks arranged in a simple grid, and the overlay shows how clean alignment should look.
When to use an overlay in your workflow
Use it at three moments: when you finish a first draft, before you hand a design to a developer, and after implementation, on a screenshot of the built page. The third check matters most, because code and design tools often disagree by a few pixels, and those differences only show up on the real page. Catching them before launch is far cheaper than fixing them after users notice.
Design teams also use overlays in reviews. Instead of saying “this feels off”, a reviewer can point at the overlay and say “this card starts eight pixels right of the grid”. Specific feedback is faster to act on and easier to agree with.
Frequently asked questions
Does my design have to match the grid exactly? No. Deliberate breaks are fine, but they should be large and obvious. Small accidental misses are what make a design look careless.
What grid should I choose for a web page? Match the grid the page was designed with, usually twelve columns on desktop. If you do not know it, try six and twelve and see which one the main edges follow.
Can I download the overlaid image? Yes. The download button saves the screenshot with the grid drawn on it, which is handy for sharing feedback with a team.
Related tools
- Vista Previa con Rejilla Superpuesta (Spanish version)
- Responsive Size Preview
- Golden Ratio Layout Calculator