Apple's latest Safari Technology Preview release introduces a new CSS Grid Lanes Inspector. This tool helps developers visualize complex masonry-style layouts where content packs into either columns or rows. It adds 'Order Numbers' to the existing Grid Inspector, clarifying how items flow across the grid. This update arrives with Safari Technology Preview 235, following initial support in version 234.

Grid Lanes fundamentally changes how content flows, moving perpendicular to the defined layout shape rather than filling columns sequentially. This prevents artificial truncation and maintains HTML order for lazy-loaded items. For developers, understanding this non-linear flow is tricky. The new visualizer is critical here, showing exactly where items land. It extends a feature from Safari's Flexbox Inspector, which has marked item order since version 16.

Beyond Grid Lanes, Apple emphasizes that its Safari devtools offer unique polish. The Grid and Flexbox Inspectors allow unlimited simultaneous overlays without performance hits. They visually distinguish between free space and gaps in Flexbox, a common point of confusion. While other browsers offer similar tools, Safari is the only one labeling content order across both Flexbox and Grid. Jen Simmons invites feedback on Bluesky or Mastodon to refine the tooling.