PixelGrid Pro
PixelGrid Pro mark
PixelGrid Pro
16px grid
guides
48 / 56 display

Try it here · then take it to any page

Watch the page snap true.

Starts off-axis. Grid wakes, guides pull, logo parks dead center. Capsule in the corner is live — no install, no account.

Get it on Edge → Get it on Chrome →

The 16px grid stays in this banner. The capsule in the corner is the real toolbar — grid stays off the rest of the page until you turn it on.

On the live page

Hover a tool. Watch it work.

Working mocks, not mockups. Hover or tab in. On a phone, scroll until it plays.

Pixel grid

A 16px lattice you can actually ship against.

Presets at 4, 8, 16, 24, 32, and 64. Switch units to px, rem, or fr. Opacity is a slider, not a guess. Option/Alt+G.

Hover to wake the grid

Rulers and guides

Pull a line. Snap it. Double-click it gone.

Drag from a ruler. Shift keeps it on the current cell. Option/Alt+H or V drops a center guide. The hostname remembers where you left them.

Hover to pull the guides

Measure

Two clicks. Width, height, and the diagonal.

Shift locks a straight run. Caps Lock snaps 15°. The readout sits on the page, not in a panel you have to keep open. Option/Alt+M.

Hover to draw the line

Inspect

Pin the box. Read the gap. Leave DevTools closed.

Hover any node. Click to pin. Double-click to clear. Turn on ID and classes when you need the selector, not before. Option/Alt+I.

Hover to pin the highlight

Capsule toolbar

Drag it. Collapse it. It stays out of the art.

Light or dark with the system. Mac writes Option. Windows writes Alt. Settings apply as you change them. Nothing leaves the machine.

Hover to collapse the capsule