Design & Layout

Grid Overlay

Overlay a configurable grid to verify alignment and spacing rhythm across a layout.

When you'd use it

• Confirm sections align to the same columns down a long landing page
• Check that a card grid follows a consistent spacing rhythm
• Find the element that sits slightly off the baseline and makes a page feel untidy
• Compare an implementation against the grid in the original design file

How to use Grid Overlay

1. Turn on Grid Overlay.
2. Adjust column count, width and gutter to match your design grid.
3. Scroll the page and look for content that breaks the alignment.
4. Toggle it off when you are finished.

Grid Overlay FAQ

Can I match my design tool's grid?

Yes — set the same column count, gutter and max width you use in Figma or Sketch, and misalignments become obvious immediately.

Does it work with CSS Grid and Flexbox layouts?

The overlay is independent of how the layout is built — it draws a reference grid on top so you can check alignment regardless of the underlying technique.

Why does my content never line up exactly?

Usually a container with unexpected padding, or a max-width that does not match the design. Combine the overlay with Outline to find which box is off.

Works well with