PixelGrid Pro

Pixel-accurate grid, rulers, guides, and measure tools for designers. Drag or collapse the toolbar.

Pixel-true grid, rulers, snap guides, measure, and inspect on any live page. Drag or collapse the toolbar. 👾 **Pixel grid** Pick a size that matches the rhythm you are working in: 4, 8, 16, 24, 32, or 64. Switch units between px, rem, and fr. Tint the grid, set opacity, and it redraws as the window resizes. 📏 **Rulers and guides** Pull a guide from the top or left ruler. Hold Shift while you drag to snap it to the current grid. Double-click a guide to delete it, or drag it into the corner. Option/Alt+H and Option/Alt+V drop a center guide. Turning rulers off hides the guides; they come back when rulers come back. Guides remember the hostname you were on. Appearance stays global. 📐 **Measure** Click two points. A live line follows the pointer with width, height, and distance. Hold Shift to lock a straight horizontal or vertical line. Caps Lock snaps the angle to 15° steps. Option/Alt+M toggles measure. 🔍 **Inspect** Hover any element for size, margin, padding, and position. Click to keep that highlight pinned. Double-click to clear it. Optionally show a safe ID and class list. Option/Alt+I toggles inspect. 🧠 **A toolbar that stays out of the way** Drag the capsule anywhere. Collapse it to a compact handle. It follows your system light or dark theme. First-run tips show the keys for each tool, labeled Option on Mac and Alt on Windows. ⚙️ **Settings that apply as you go** Change grid size, colors, ruler type, units, inspect extras, and shortcut style without a reload. Click outside the panel, press Escape, or collapse the toolbar to close it. Keyboard shortcuts can be switched off, or forced to Mac or Windows labels.