Skip to content

v0.2.0 — CSS Grid, for real

Latest
Latest

Choose a tag to compare

View all tags
@saifulapm saifulapm released this 12 Jun 01:28
· 1 commit to main since this release
v0.2.0
d4c4650

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

Assets 2
Loading