Open source · Design Systems

Layout Grid Measurement

Measure layout columns, gutters and responsive constraints from rendered pages.

v0.1.0 · Node.js 22+ · MIT

Browse the public repository · View releases

At a grid width it computes each column's edges from the contract and checks that every element's left and right edges sit on the edges of the columns it is supposed to span, that the gap between column-adjacent elements is the contract gutter, that nothing overlaps, and that nothing runs outside the margins or off the viewport. At a stacked width it checks instead that each element fills the content width, starts at the content edge, and sits clear of the one above it.

This walkthrough uses the tool's public README and checked-in example files. Run the command from a repository checkout with Node.js 22+.

Run the checked-in example

# a dashboard that matches its contract at both widths, stacking at 375
node bin/layout-grid-measurement.mjs \
  --measurements examples/clean/measurements.json \
  --contract examples/clean/layout.contract.json \
  --now 2026-09-18
echo $?   # 0

# one card six pixels off its column, and two stacked cards that do not fit
node bin/layout-grid-measurement.mjs \
  --measurements examples/broken/measurements.json \
  --contract examples/broken/layout.contract.json \
  --now 2026-09-18
echo $?   # 1

Read the result

npm run example runs the first, npm run example:broken the second. --now is passed so the example's verdict does not depend on the day it is run; see The clock.

Scope

Every limit is enforced. Exceeding one is an incomplete result naming the limit — never a silent truncation, and never a pass.