Skip to content
install

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build

tool · one of 34free, 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 itPress ⌘+K on any tab and type grid.Ctrl+Kon Windows and Linux

Lays a column grid over the page and leaves it there while you work
readselement boxes, capped at 3000 nodes
writesone overlay element, removed when off
sendsnothing
patternseight, each carrying its own paint
detectionoffers a reading, never applies it
pinned tothe viewport, not the document
planfree
Add LoupeKit- opens the list of browsers it can be installed in

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe 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.

Add LoupeKit- opens the list of browsers it can be installed in

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build

63 of these · no host permissions · three free audits