Grid Tool — Ruler & Guides

On-page rulers, alignment guides, and a measurement tool for web designers and frontend developers.

Grid Tool adds professional-grade layout tools directly on top of any webpage, no DevTools panel required. 𝐑𝐔𝐋𝐄𝐑𝐒 Horizontal and vertical pixel rulers that stay fixed to the viewport as you scroll, with tick marks that always reflect real page coordinates. Show or hide each ruler independently, or toggle both at once from the toolbar popup. 𝐀𝐋𝐈𝐆𝐍𝐌𝐄𝐍𝐓 𝐆𝐔𝐈𝐃𝐄𝐒 Drag a guide off either ruler and drop it anywhere on the page. Create as many horizontal and vertical guides as you need, drag them to reposition, double-click to remove one. Guides remember their position on each page and reappear automatically after you refresh, no re-measuring every time you reload. 𝐒𝐀𝐕𝐄𝐃 𝐋𝐀𝐘𝐎𝐔𝐓𝐒 Save your current set of guides as a named layout, then load it onto any page later, great for reusing a grid across a design system, a client project, or a set of similar templates. Rename, duplicate, and delete layouts from the popup. 𝐌𝐄𝐀𝐒𝐔𝐑𝐄𝐌𝐄𝐍𝐓 𝐓𝐎𝐎𝐋 Click and drag anywhere on the page for a live width/height/X/Y readout. Hold Shift to lock the measurement to a straight horizontal or vertical line. Choose your preferred unit: px, %, rem, em, vw, or vh. 𝐄𝐋𝐄𝐌𝐄𝐍𝐓 𝐈𝐍𝐒𝐏𝐄𝐂𝐓𝐎𝐑 Hover any element to see its exact box-model dimensions (width, height, top, left, right, bottom) read-only, never modifies the page. 𝐅𝐔𝐋𝐋 𝐂𝐔𝐒𝐓𝐎𝐌𝐈𝐙𝐀𝐓𝐈𝐎𝐍 Ruler size, opacity, background and text color. Guide color, opacity, thickness, and snap-to-increment. Measurement line thickness and label visibility. Every setting applies instantly to every open tab. 𝐊𝐄𝐘𝐁𝐎𝐀𝐑𝐃 𝐒𝐇𝐎𝐑𝐓𝐂𝐔𝐓𝐒 & 𝐑𝐈𝐆𝐇𝐓-𝐂𝐋𝐈𝐂𝐊 𝐌𝐄𝐍𝐔 Toggle rulers, guide visibility, measurement mode, and the inspector from the keyboard, or from a right-click context menu that also lets you copy an element's dimensions or drop a guide exactly where you clicked. 𝐏𝐑𝐈𝐕𝐀𝐂𝐘 Grid Tool works entirely inside your browser. It does not collect, transmit, track, or sell any data. Your guide positions and settings are stored locally (and optionally synced across your own signed-in Chrome browsers via Chrome's built-in sync), never sent to any server Grid Tool operates, because Grid Tool doesn't operate one. Built for frontend developers, UI/UX designers, and anyone who needs to eyeball spacing, alignment, and element sizing on a live webpage.