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+; inspect the source before using it on your own files.

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.

Where this check stops

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

Before adapting the command to your own workflow, review the accepted inputs, exit codes and safety boundaries in the README.

Compiled with AI assistance from checked-in public documentation and example scripts. Run the example and review the repository's current documentation before relying on its result.