GridSimby Studio Practice

GridSim

Free
Drag ▦ GridSim to your bookmarks bar

Free, no sign-up. Paste any website and see its grid drawn right on the page — columns across (x) and baseline rows down (y). Check it on desktop or inside a real phone, see what lines up and what doesn't, then take the grid with you.

  1. Set up your grid Choose your columns, gutter, margins and baseline on the left. Switch to Mobile to check it inside a real phone.
  2. See it on a live site Type a URL and the grid lands on the live page. Or drag the GridSim button to your bookmarks bar to use it on any site.
  3. Take it with you Download a transparent overlay and drop it over your design in Figma or Sketch. Want code instead? Copy the CSS.
CyberRuler Once your grid is dialed in, measure it pixel-perfect on macOS. The best Mac ruler in the galaxy. $9.99 one-time. See it →

Grid

x columns · y baseline
Live site on your grid
Some sites block embedding — if the preview stays blank, use the GridSim bookmarklet from the bar above, right on the page.

Drop it on your design

A transparent SVG of your exact grid — drag it into Figma, Sketch, or Photoshop, over your artboard. Your design shows through; the columns and baseline land on top.

Take it with you

Need your grid in code? Copy it as ready-to-paste CSS tokens.

Or drag the ▦ GridSim bookmarklet from the bar above to re-check any live site — adjust the grid right on the page.