Spacing Grid

Spacing grid mode reveals every gap between sibling elements in a single view — ideal for checking consistent spacing in nav bars, card rows, and form layouts.

How it works

1. Switch to Spacing grid mode — press 5.
2. Hover over a container element (a parent with two or more visible children).
3. Calipers highlights the parent and draws measurement lines between every consecutive sibling pair.
4. Each gap is labelled in pixels.

Layout detection

Calipers detects whether siblings are arranged in a row or column by comparing the position of the first two children, then measures gaps along the predominant axis.

Hidden, zero-size, and Calipers overlay elements are excluded from the grid.