TL;DR
Safari’s Web Inspector gained an “Order Numbers” overlay that visualizes the DOM order of items when using the new CSS Grid Lanes layout. The feature shipped in Safari Technology Preview 235 and works for Grid, Subgrid and Grid Lanes, helping developers understand and tune content flow and accessibility.
What happened
Apple’s Web Inspector for Safari has been updated with a new visual aid for the recently standardized CSS Grid Lanes layout. Grid Lanes — a masonry-style addition to CSS Grid — lets developers line up content in either columns or rows so items with different aspect ratios can pack together without forced truncation. Because Grid Lanes causes content to flow perpendicular to the declared layout axis, the visual order of elements can be counterintuitive. To address that, Safari’s Grid Inspector now offers “Order Numbers,” an overlay that numbers items to reveal their DOM flow. The Grid Inspector already displays grid lines, track sizes, line numbers and names, and area names; the new order overlay extends similar ordering feedback that Safari’s Flexbox Inspector has provided since Safari 16.0. The Order Numbers feature is available in Safari Technology Preview 235, and the Web Inspector team is soliciting feedback as they refine the tool.
Why it matters
- Makes the actual reading and focus order of Grid Lanes layouts visible, aiding debugging and design iteration.
- Helps developers tune flow-tolerance and placement to reduce unexpected tabbing or screen-reader order issues.
- Clarifies behavior of masonry-style grids so teams can avoid unintended content reshuffling when items lazy-load.
- Safari’s tooling is currently unique in labeling content order in both Grid and Flexbox inspectors, giving developers a distinct in-browser analysis capability.
Key facts
- CSS Grid Lanes provides masonry-style layout by aligning content in columns or rows, not both.
- Grid Lanes packs items with varying aspect ratios and groups earlier HTML content toward the start of the container.
- Content flow in Grid Lanes moves perpendicular to the layout axis — defining columns makes items flow across them, and defining rows makes items flow along the column direction.
- Safari’s Grid Inspector already shows grid lines, track sizes, line numbers, line names, and area names.
- The new Order Numbers overlay reveals the DOM order of grid items and makes it easier to select appropriate flow-tolerance values.
- Order Numbers works for CSS Grid, Subgrid, and Grid Lanes.
- Order-number labeling is an extension of a feature Safari’s Flexbox Inspector has supported since Safari 16.0.
- Both Grid and Flexbox Inspectors in Safari allow multiple overlays to be activated at once and let users change overlay colors for better contrast.
- Safari’s Flexbox Inspector distinguishes between excess free space and gaps and shows item boundaries and distribution on both axes.
- Order Numbers shipped in Safari Technology Preview 235; the Web Inspector team invited feedback for further refinements.
What to watch next
- Developer feedback and iterative refinements to the Order Numbers feature, which the Web Inspector team has invited.
- Availability of the feature and any changes in future Safari Technology Preview releases or documentation updates (not confirmed in the source).
- Usage examples and demos of CSS Grid Lanes provided by the team to illustrate flow behavior and best practices.
Quick glossary
- CSS Grid Lanes: A masonry-style extension to CSS Grid that lines up content in either columns or rows so items with different sizes can pack together.
- Grid Inspector: A browser developer-tool overlay that visualizes grid lines, track sizes, line names and other Grid-specific layout information.
- Order Numbers: An overlay in Safari’s Grid Inspector that numbers grid items to reveal their DOM order and flow through the layout.
- Flexbox Inspector: A Web Inspector overlay that visualizes Flexbox container behavior, item boundaries, gaps, and order.
- Flow-tolerance: A layout tuning concept referenced for Grid Lanes that controls how strictly the printed flow order is adhered to versus tolerating reflow for layout purposes.
Reader FAQ
Which Safari build includes Order Numbers for Grid Lanes?
Order Numbers shipped in Safari Technology Preview 235.
Does Order Numbers work with other grid types?
Yes. The overlay works for CSS Grid, Subgrid, and Grid Lanes.
How does Grid Lanes change content flow compared with multi-column or Flexbox?
Grid Lanes flows content perpendicular to the declared axis, so defining columns makes content flow across them rather than filling one column top-to-bottom as in multicolumn layouts.
Are other browsers offering the same content-order labeling in devtools?
According to the source, Safari’s Grid and Flexbox Inspectors are currently the only browser devtools that label content order.
Where can I try examples of Grid Lanes and the updated inspector?
Try the Grid Lanes demos and Safari Technology Preview builds referenced by the Web Inspector team (links provided in the source).
New Safari developer tools provide insight into CSS Grid Lanes Jan 14, 2026 by Jen Simmons and Brandon Stewart You might have heard recently that Safari Technology Preview 234 landed…
Sources
- New Safari developer tools provide insight into CSS Grid Lanes
- Introducing CSS Grid Lanes
- CSS Grid Lanes
- CSS grid layout – MDN Web Docs
Related posts
- Ask HN: How Developers Are Running RAG Locally for Code and Documents
- Crafting Interpreters — Hands-on guide to building a scripting language
- Chroma Explorer: Native macOS Client for Managing ChromaDB Vector Stores