Grid overlay for Chrome

Put a column grid over any live web page and check whether the layout lines up with the grid in your design file, without touching the site's code.

What it does

The Layout Grid Overlay draws evenly spaced, semi-transparent columns over the page, the same kind of layout grid you set up in Figma or Sketch. With the grid in place you can see at a glance whether headings, images and cards start and end on the columns they are meant to, or drift a few pixels off.

The grid is drawn on top of the page and does not change it. The columns stay in place as you scroll, so you can check every section of a long page against the same grid.

How to use it

1. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
2. Click Layout Grid in the control bar. A panel opens with the grid settings and a visibility toggle.
3. Switch the grid on and set it up to match your design.

Once it is set up, press 3 to show or hide the grid without opening the panel.

Grid settings

• Columns: 2, 3, 4, 6, 8, 12, 16 or 24 columns of equal width.
• Max Width: the width of the grid in pixels, centered on the page, to match a fixed width container. Leave it at auto to span the full window.
• Gutter: the space between columns, from 0 to 100 pixels.
• Margin: the space between the outer columns and the edge of the grid, from 0 to 350 pixels, applied to both sides.
• Color: any color, from a color picker or by typing a hex value.
• Opacity: from 10% to 90%, so the grid stays readable over both light and dark pages.

Out of the box the grid has 8 columns, a 20 pixel gutter, 40 pixel margins and no max width, in magenta at 30% opacity. Changes apply as you make them.

How it works

The overlay is built with CSS Grid, so the columns divide the available width exactly the way a real CSS grid layout would, gutters and margins included. Its width is measured without the vertical scrollbar, so the columns line up with the page's own content area rather than being pushed sideways by the scrollbar. When you set a max width, the grid centers itself the same way a typical margin: 0 auto container does, which makes it easy to match a site's main wrapper.

Your settings are saved, so the next time you turn the grid on, on any site, it comes back with the same columns, gutter and margin. If the grid was on when you closed Screen Ruler, it is on again the next time you start it.

Limits

• Columns only. There is no horizontal row grid or baseline grid.
• Equal columns. All columns share the same width, and the margin is the same on the left and right.
• One grid at a time. You cannot stack a second grid, for example a 12 column grid inside a sidebar.
• A guide, not a measurement. The grid shows where things should line up. To get exact pixel values for an element, use Inspect Element or distance measurement.

When it is useful

• Design QA. Set the grid to the values in your design file and check whether the build follows it at each section of the page.
• Checking responsive layouts. Resize the window, or use Breakpoint Detector to see where the layout changes, and check the grid at each size. In Responsive Mode you can check several widths side by side.
• Learning from other sites. Work out which grid a site you admire uses by trying 12 or 16 columns with different gutters until the content snaps to it.
• Spotting drift. Content that sits a few pixels off the grid is easy to miss by eye and obvious with columns behind it.

To see the grid that a page itself defines with display: grid or flexbox, rather than a grid you set, use the Flexbox and Grid Inspector.

The Layout Grid Overlay is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

Does Chrome DevTools have a column grid overlay?

DevTools can highlight grids that a page defines with CSS display: grid, but it cannot lay your own design grid over a page. Screen Ruler's overlay is independent of the page's code, so you can check any layout, whether it is built with CSS Grid, flexbox or something older, against the grid from your design file.

Can I set a 12 column grid with a max width?

Yes. Choose 12 in Columns and type the container width, for example 1200, in Max Width. The grid centers itself on the page at that width.

Does the grid stay when I scroll?

Yes. The columns are fixed to the window, so they stay in place while the page scrolls underneath and you can check every section against the same grid.

Are my grid settings saved?

Yes. Columns, gutter, margin, max width, color and opacity are remembered and apply on every site, so you set your grid up once.