How-to · Layout
How to add ruler guides to any web page in Chrome
The short answer
Open Screen Ruler on the tab, press 3, and pull horizontal or vertical guides onto the live page — they stay put while you scroll, nudge by 1px with the arrow keys, and can be auto-spaced into an even grid. Esc removes everything.
- 1
Open the page at the viewport width your layout targets and click the Screen Ruler icon.
- 2
Press 3 to switch to guides mode.
- 3
Pull a vertical guide onto an edge that elements should share, and horizontal ones for baselines.
- 4
Add more guides and auto-space them when you need an even grid.
- 5
Nudge any guide with the arrow keys — 1px per press, 10px with Shift.
- 6
Press Esc to remove all guides and the overlay.
Every design tool lets you drag guides out of the rulers; the browser gives you nothing of the sort. So when you're checking a live layout against a column grid, or lining up edges across sections that never share a screenshot, the usual move is squinting. Screen Ruler puts real guides on the real page: click the icon, press 3, and pull lines exactly where you need them.
Pull a guide onto the page
Guides are straight horizontal or vertical lines pinned to the page itself, not to the window — scroll and they travel with the content. Pin a vertical guide to the leading edge of your content column and every element that should share that edge either touches the line or visibly doesn't. Horizontal guides do the same job for baselines and row alignment.
Space a set into a grid
One guide answers one question; a set of them becomes a working grid. Place several guides and let Screen Ruler auto-space them evenly, instead of computing gutter positions in your head. A twelve-second column overlay on the live page is often all it takes to see which card is sitting outside the grid it was built on.
Nudge to the exact pixel
Dragging gets a guide close; the arrow keys get it exact. Each press moves the active guide by 1px, and by 10px with Shift, so "the container starts at 96px" is a position you can actually hit rather than approximate. That precision is what makes a guide trustworthy: a reference line that's itself 2px off proves nothing.
Guides work with the other modes
The guides stay in place while you switch modes, so the workflow compounds: pin the lines that define the layout, then press 2 to hover elements and read the gaps between them, or drag-measure a region to confirm a size the spec dictates. The guides hold your reference; the other modes do the interrogation.
Gone without a trace
The overlay is drawn on the extension's own layer — the page is never modified, so guides can't shift the layout they're checking. When you press Esc, everything is removed; guides aren't saved between sessions, which is the honest trade of a checking tool rather than a persistent grid system. And as with every mode, Screen Ruler has no host permissions — it's injected via activeTab only on the tab where you clicked — and makes no network calls.