v0.2.0 — CSS Grid, for real

CSS Grid support (Taffy-backed)

display:grid now computes with a real grid algorithm — a Taffy (WASM) island inside the Yoga engine — validated like everything else: 336/336 layout cases match headless Chromium within 1px; renders pixel-diffed (grid cases worst 0.6%), gated in CI.

Supported

• grid / grid-cols-N / grid-rows-N (resolved as minmax(0,1fr), exactly what Tailwind emits)
• col-span-N / col-span-full / row-span-*, explicit col/row-start/end incl. negative lines
• grid-flow-row/col incl. dense packing, auto-cols/rows-auto/min/max/fr
• justify-items/self-*, place-items/content/self-*
• grids in flex, flex in grid items, nested grids, text directly in cells
• works in check, render, the MCP server, and the GitHub Action

Out of scope (warned, documented)

Arbitrary track lists (grid-cols-[...]), named areas, subgrid (Taffy upstream limitation), baseline alignment in grid, inline-grid shrink-to-fit in block flow. See the engineering notes.

Notes

• New runtime dependency: taffy-layout@2.0.3 (exact-pinned). The WASM initializes lazily on the first grid — flex-only checks pay nothing.
• No breaking changes; flexbox behavior is byte-identical (all 316 pre-existing goldens unchanged).

npx @saifulapm/layoutlint check src/components/Dashboard.tsx

Full diff: v0.1.0...v0.2.0

v0.1.0 — layout checks and screenshots, no browser

The first release of layoutlint: deterministic UI layout verification for AI coding agents — and anyone else who wants layout bugs caught in milliseconds without launching a browser.

What's in v0.1.0

• layoutlint check <file> — catches overflow, overlap, viewport breakage, and text truncation across viewports (~8ms for 4 viewports). Every violation answers what, where, by how much, and a plausible fix — shaped for an agent to self-correct. --json for machines, exit 1 on violations.
• layoutlint render <file> -o card.png — a deterministic screenshot painted by the engine, not a browser: real Tailwind v4 colors (extracted from Chrome itself), text as glyph outlines from the same HarfBuzz shaping that measured it, borders, radii, clipping. Self-contained SVG or PNG.
• MCP server (layoutlint-mcp) — check_layout and render_layout tools, so agents can verify and look at UI after every edit.
• GitHub Action — uses: saifulapm/layoutlint@v0 lints the layout of changed components on every PR.
• Library — check() and render() from @saifulapm/layoutlint. Node ≥20, no browser dependency anywhere.

Why trust it

Validated against headless Chromium on every push: 297/297 layout corpus cases within 1px of getBoundingClientRect (most at 0.00px) — hand-written cases, real Tailwind v4 markup, and 200 seeded fuzz cases — and every render pixel-diffed against a Chromium screenshot (42/42 within the documented antialiasing budget). Scoreboards and methodology: docs/engineering.md.

Scope (v0)

Flexbox + Tailwind v4, static JSX/HTML. Grid approximates as a column (warned). Shadows/gradients/opacity not painted yet. Known envelope edges are documented, not hidden.

npm i -g @saifulapm/layoutlint   # global: layoutlint / layoutlint-mcp commands
npx -y @saifulapm/layoutlint check Card.tsx   # or one-shot