Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

tool · one of 34 free, no counter

Grid

Where are this layout’s columns actually falling?

A twelve-column grid is easy to describe and hard to verify by eye, especially where the gutters are asymmetric or the container is not centred. This draws the arrangement over the page as a single pinned element and offers to detect the page’s own - two independent readings, so a disagreement between them is visible rather than averaged away.

Reach it Press ⌘ + K on any tab and type grid. Ctrl + K on Windows and Linux

Lays a column grid over the page and leaves it there while you work
reads element boxes, capped at 3000 nodes
writes one overlay element, removed when off
sends nothing
patterns eight, each carrying its own paint
detection offers a reading, never applies it
pinned to the viewport, not the document
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

When a design was handed over with a grid spec and the build has drifted from it, or when you have inherited a layout with no spec at all and want to know what it is using before changing anything.

section#asked

Asked about this tool

Why does Detect take two presses?

The first prints what it found and the second adopts it. A detector that applied its own guess would leave you unable to tell what the page has from what the tool decided it has.

It says it found no grid. Is that a failure?

No - it is a reading. found: false names which of the two readings came back empty, and plenty of well-built pages use flow layout with max-widths and have no grid to find.

Does the overlay survive a reload?

The settings do; the overlay does not. Nothing in this panel that draws on a page comes back by itself after a reload - that is a page modification with nothing on screen to account for it.

Can I get the grid as CSS?

The column count, gutter and margin are what a grid-template-columns needs, and the card prints all three. The tool deliberately does not write the declaration for you, because the container it belongs on is a decision about your markup.

how to use grid

  1. Open Grid and pick one of the eight patterns, or ask it to detect the page's own.
  2. The overlay is pinned to the viewport rather than the document, so scrolling does not drag it.
  3. Compare the drawn grid against the detected one: a disagreement between them is the finding.
  4. Turn it off and the overlay element is removed. Nothing was written into the layout.
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits