CSS Grid Lanes Without Reading-Order Traps

CSS grid lanes can pack uneven cards, but the layout is not shippable if it breaks source order, focus order, zoom, or the regular-grid fallback. This tutorial treats the draft as progressive enhancement and measures parsing, computed behavior, overflow, and order separately.

CSS grid lanes begins with source order

CSS grid lanes is a draft layout model for packing items into lanes, but document order remains the first design decision. Put cards in a meaningful DOM sequence before applying any packed layout. A reader who receives linear content, a keyboard user who tabs through links, and a narrow viewport should all encounter the same editorial priority. If source order is meaningless, a layout feature cannot repair it.

Write the content contract as a numbered fixture. Each card gets a DOM position, heading, interactive target, height class, and optional span. The acceptance rule is simple: removing all enhancement CSS leaves a usable regular grid or single column in the intended order. Packed placement may change vertical proximity, but it must not become the only way to understand grouping or sequence.

This is especially important for a CSS masonry layout whose visual reading path can appear to jump between columns. Start with the principles in treating reading order as a separate accessibility decision, then evaluate the packed branch as a visual enhancement. The lab uses generated cards and approximate geometry to flag backtracking. It does not claim to simulate a screen reader or prove assistive-technology behavior. CSS grid lanes ships only when the underlying document remains coherent without it.

Understand the draft placement model

The current CSS Grid Layout Module Level 3 describes grid-lanes as work in progress. Treat its syntax and algorithm as a dated experimental target, not settled platform truth. In the draft model, items participate in a lane-oriented layout where the browser can choose positions based on available lane space. Uneven content packs more tightly than a conventional row-aligned grid.

That packing changes what “next” looks like visually. In a regular grid, items often align to shared rows. In a waterfall layout, one tall card leaves space that a later card can occupy in a neighboring lane. A spanning item may constrain multiple running lane heights. The first figure exposes those heights and keeps the DOM number printed on every card, so density never erases origin.

Do not describe display: grid-lanes as broadly available unless current interoperable evidence supports that claim. The article and lab call it a draft progressive enhancement. CSS.supports can indicate whether a parser accepts a declaration, but parsing does not prove the intended placement algorithm ran. CSS grid lanes therefore needs a computed behavior probe built from geometry, followed by a visible fallback. The feature is interesting precisely because the enhancement can remain optional while the content contract stays durable.

Control lanes, gaps, spans, and tolerance

A useful fixture varies four things independently: lane count, gap, item spans, and flow-tolerance. Lane count defines the horizontal opportunities. Gap preserves spatial separation. Spanning items can reset or couple running heights. The draft flow-tolerance concept affects how much reordering pressure the packing algorithm may accept within its defined placement behavior. Every control should have a bounded value and a receipt row.

Test with production-shaped content rather than repeating identical cards. Long titles, missing thumbnails, validation messages, translated labels, and variable metadata produce the height diversity that reveals layout failure. The practice of stress-testing layouts with production-shaped content fixtures is more valuable here than a polished gallery of lorem ipsum.

Do not use visual packing to imply a ranking that the DOM does not contain. If the largest card is “featured,” encode that state semantically and place it intentionally. If a spanning card interrupts multiple lanes, verify that tab focus does not seem to teleport behind it. CSS grid lanes is good at using space; it does not know the editorial meaning of that space. The team must define whether compactness, stable reading direction, or grouped chronology is the primary product value and limit the enhancement accordingly.

Compare DOM, visual, and keyboard order

Three orders need separate evidence. DOM order is the source sequence. Keyboard order is the sequence observed by focusing interactive elements, normally following the document unless tabindex or another mechanism interferes. Approximate visual order can be derived by sorting measured rectangles into rows or scanning by block and inline coordinates, but that algorithm is only a diagnostic. CSS grid lanes may make the three paths appear to diverge even when the DOM itself remains unchanged.

The braid figure draws one line per order and labels every crossing. A crossing is not automatically a defect; it is a prompt to inspect whether a person can predict the next target. Dense cards with repeated actions are especially sensitive because identical buttons remove contextual clues. Record focus target labels, bounding rectangles, viewport, writing direction, zoom, and layout mode.

The current CSS Display Level 4 reading-flow draft explores controls for reading flow, but it too is work in progress. Do not invoke a draft property as a blanket accessibility fix. CSS grid lanes should preserve sensible source order first. Any intentional reading-flow change needs its own compatibility and assistive-technology testing. The lab reports keyboard focus from actual DOM traversal and labels its visual heuristic approximate, maintaining that distinction in the exported receipt.

Author the regular-grid fallback first

The baseline is a conventional grid with explicit minimum card width, gap, and auto rows. It must render all content, preserve source order, avoid horizontal overflow, and remain usable at the narrowest supported viewport. Put that declaration before the experimental one when normal cascade fallback is reliable: a browser that rejects the later display value keeps the earlier grid.

Keep the two branches in a named cascade layer or enhancement class so ownership is obvious. The method in isolating progressive behavior in cascade layers helps prevent a later component override from accidentally enabling half the experiment. CSS grid lanes should not require JavaScript to rearrange nodes for the fallback. DOM movement creates a second order system and makes resize behavior harder to reason about.

The fallback is allowed to use more vertical space. “Honest” means it preserves content and interaction, not that it visually imitates packing through brittle spans. Compare card widths, overflow, focus sequence, and source sequence between branches. If a design requirement truly depends on dense packing, state that the experience degrades to a regular grid instead of pretending parity. That explicit loss is preferable to a hidden script that guesses row spans from measured heights and drifts when fonts, zoom, or content change.

Separate parsing from computed behavior

Feature detection has two stages. First, ask CSS.supports whether the executing browser parses display: grid-lanes and any draft controls you plan to use. Second, mount a small off-screen or visible fixture and inspect computed display plus item rectangles. A parser can recognize syntax before the targeted behavior is complete, behind a flag, or aligned with the current draft. CSS grid lanes needs both observations in its receipt.

The behavior probe uses mixed-height cards designed to distinguish a packed lane result from row alignment. It compares the top coordinate of a later short card with the bottom of an earlier tall neighbor. The exact thresholds belong to the fixture and must tolerate subpixel layout. A result can be native-behavior-observed, parsed-but-not-observed, or unsupported. It must never silently convert the last two into “supported.”

Card internals remain independent. Use container queries to make each packed card respond to its own space rather than assuming the viewport predicts its width. This separation makes CSS grid lanes responsible for placement while the component remains responsible for its local composition. At 200-percent zoom or a narrow viewport, the test repeats because both lane count and card wrapping can change.

Run the order and packing lab

The browser lab generates twelve mixed-height cards from a fixed seed. Every card includes its DOM number and one focusable control. The baseline branch always uses a regular grid. If the parser and geometry probe support the draft branch, the user can enable it; otherwise the unsupported state stays visible. CSS grid lanes is never emulated with JavaScript, and the artifact never rearranges the DOM.

After layout, the lab records CSS.supports results, computed display, rectangles, DOM sequence, tab-target sequence, approximate visual sequence, backtracking count, horizontal overflow, viewport, device pixel ratio, and branch. It reruns the same seed to confirm the generated fixture digest. Export is available only after the baseline passes source-order and overflow checks; native support is optional and separately labeled.

The official Web Platform Tests grid-lanes directory supplies names and conformance cases for the evolving draft. The existence of tests is not evidence that a particular browser passes them. This local lab is also not a conformance suite, polyfill, support survey, or assistive-technology oracle. It gives a product team a deterministic content fixture and an honest observation boundary. Test focus and source order before enabling the packed branch.

Runnable artifact — Not a polyfill, spec emulator, browser-support survey, or assistive-technology reading-order proof.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Grid lanes order lab</title><style>:root{color-scheme:dark}*{box-sizing:border-box}html{overflow-wrap:anywhere}body{margin:auto;max-width:1080px;padding:24px;background:#10151f;color:#f7f2e8;font:16px/1.5 system-ui}h1,h2{line-height:1.12}button,a,input,select{font:inherit;min-height:44px}input,select{width:100%;min-width:0}button{border:0;border-radius:10px;padding:10px 16px;background:#ff9a72;color:#261007;font-weight:800}.panel{margin:16px 0;padding:16px;border:1px solid #7d8ca6;border-radius:14px}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}.controls label{display:grid;gap:4px;min-width:0}table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #58657a;text-align:left;vertical-align:top}.scroll{max-width:100%;overflow:auto}textarea{display:block;width:100%;min-width:0;min-height:280px;background:#080c13;color:#fff}.downloads{display:flex;flex-wrap:wrap;gap:12px}.downloads a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px 12px;border:1px solid currentColor;border-radius:9px;color:#9dd6ff}.downloads a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe270;outline-offset:3px}[aria-disabled="true"]{opacity:.55;pointer-events:none}canvas,svg{display:block;max-width:100%;height:auto}@media(max-width:620px){body{padding:14px}.panel{padding:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}@media(forced-colors:active){button,.panel,.downloads a{border:2px solid ButtonText}.downloads a{color:LinkText}}</style><main><h1>Grid lanes order lab</h1><p>Generated synthetic cards compare a source-order regular-grid baseline with native draft behavior when observed. This is not a polyfill or assistive-technology proof.</p><div class="panel controls"><label>Seed<input id="seed" type="number" value="907" min="1" max="999999"></label><label>Mode<select id="mode"><option value="fallback">Regular-grid fallback</option><option value="native">Native grid lanes when observed</option></select></label><label>Columns<input id="columns" type="number" value="3" min="1" max="5"></label><button id="run">Render and inspect</button></div><p id="status" class="panel" aria-live="polite">Not run</p><style>#cards{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:12px;max-width:100%}.card{min-width:0;padding:14px;border:2px solid #7d8ca6;border-radius:12px;background:#182232}.card button{width:100%}.h1{min-height:110px}.h2{min-height:170px}.h3{min-height:230px}@media(max-width:620px){#cards{display:grid!important;grid-template-columns:minmax(0,1fr)!important}.card{grid-column:1/-1!important;width:auto!important}}</style><section id="cards" class="panel" aria-label="Generated card fixture"></section><textarea id="receipt" readonly aria-label="Grid-lanes order receipt"></textarea><p class="downloads"><a id="download" download="grid-lanes-order-receipt.json" aria-disabled="true">Download JSON receipt</a></p></main><script>
const q=s=>document.querySelector(s),cards=q("#cards");let url;
function rng(seed){let state=seed>>>0;return()=>{state^=state<<13;state^=state>>>17;state^=state<<5;return(state>>>0)/4294967296}}
const hash=async text=>[...new Uint8Array(await crypto.subtle.digest("SHA-256",new TextEncoder().encode(text)))].map(v=>v.toString(16).padStart(2,"0")).join("");
function values(){const seed=Number(q("#seed").value),columns=Number(q("#columns").value);if(!Number.isInteger(seed)||seed<1||seed>999999)throw new Error("seed-out-of-range");if(!Number.isInteger(columns)||columns<1||columns>5)throw new Error("columns-out-of-range");return{seed,columns,mode:q("#mode").value}}
function generate(seed){const random=rng(seed);return Array.from({length:12},(_,index)=>({id:index+1,height:1+Math.floor(random()*3),span:index===5?2:1,title:"Generated card "+(index+1)}))}
function visualOrder(rects){return[...rects].sort((a,b)=>Math.abs(a.top-b.top)>8?a.top-b.top:a.left-b.left).map(item=>item.id)}
async function run(){try{if(url)URL.revokeObjectURL(url);q("#download").removeAttribute("href");q("#download").setAttribute("aria-disabled","true");q("#receipt").value="";const input=values(),fixture=generate(input.seed),replay=generate(input.seed),fixtureHash=await hash(JSON.stringify(fixture));if(JSON.stringify(fixture)!==JSON.stringify(replay))throw new Error("fixture-replay-mismatch");cards.style.setProperty("--columns",input.columns);cards.style.display="grid";cards.style.gridTemplateColumns="repeat("+input.columns+",minmax(0,1fr))";const parse={displayGridLanes:CSS.supports("display","grid-lanes"),flowTolerance:CSS.supports("flow-tolerance","1em")};if(input.mode==="native"&&parse.displayGridLanes)cards.style.display="grid-lanes";cards.innerHTML=fixture.map(item=>"<article class=\"card h"+item.height+"\" data-id=\""+item.id+"\" style=\"grid-column:span "+item.span+"\"><h2>"+item.title+"</h2><p>Synthetic height "+item.height+"; DOM position "+item.id+".</p><button type=\"button\">Inspect "+item.id+"</button></article>").join("");await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));const nodes=[...cards.querySelectorAll(".card")],rects=nodes.map(node=>{const r=node.getBoundingClientRect();return{id:Number(node.dataset.id),top:Number(r.top.toFixed(2)),left:Number(r.left.toFixed(2)),bottom:Number(r.bottom.toFixed(2)),width:Number(r.width.toFixed(2))}}),domOrder=nodes.map(node=>Number(node.dataset.id)),focusOrder=[...cards.querySelectorAll("button")].map(button=>Number(button.closest(".card").dataset.id)),approximateVisualOrder=visualOrder(rects),backtracks=approximateVisualOrder.filter((id,index)=>index&&id<approximateVisualOrder[index-1]).length,overflow={cards:cards.scrollWidth>cards.clientWidth+1,document:document.documentElement.scrollWidth>document.documentElement.clientWidth+1,scrollWidth:document.documentElement.scrollWidth,clientWidth:document.documentElement.clientWidth},computedDisplay=getComputedStyle(cards).display,behaviorObserved=input.mode==="native"&&parse.displayGridLanes&&computedDisplay.includes("grid-lanes"),baselinePass=domOrder.every((id,i)=>id===i+1)&&focusOrder.every((id,i)=>id===i+1)&&!overflow.cards&&!overflow.document,core={schema:"grid-lanes-order-receipt-v1",input,fixtureHash,replay:{sameInput:true},parse,computedDisplay,behaviorObserved,status:behaviorObserved?"native-behavior-observed":input.mode==="native"&&!parse.displayGridLanes?"unsupported-fallback-active":parse.displayGridLanes?"parsed-not-observed":"unsupported",domOrder,focusOrder,approximateVisualOrder,visualOrderBoundary:"rectangle-sort diagnostic only; not assistive-technology reading order",backtracks,overflow,baselinePass,viewport:{width:innerWidth,height:innerHeight,devicePixelRatio},provenance:"Generated mixed-height and spanning cards with a fixed seed; no external content.",claimBoundary:"Draft progressive enhancement only: not a grid-lanes polyfill, spec emulator, support survey, or assistive-technology proof."},receipt={...core,receiptHash:await hash(JSON.stringify(core))},serialized=JSON.stringify(receipt,null,2);q("#receipt").value=serialized;url=URL.createObjectURL(new Blob([serialized],{type:"application/json"}));q("#download").href=url;q("#download").removeAttribute("aria-disabled");q("#status").textContent=(baselinePass?"PASS":"FAIL")+": "+core.status+"; document overflow "+overflow.document+"; visual backtracks "+backtracks}catch(error){q("#status").textContent="FAIL: "+error.message}}
q("#run").addEventListener("click",run);const requested=new URLSearchParams(location.search).get("mode");if(["fallback","native"].includes(requested))q("#mode").value=requested;run();</script><script>document.querySelectorAll(".controls input,.controls select").forEach(control=>control.addEventListener("input",()=>{document.querySelectorAll(".downloads a").forEach(link=>{link.removeAttribute("href");link.setAttribute("aria-disabled","true")});document.querySelectorAll("#rows,#cards,#highlight").forEach(node=>node.textContent="");const canvas=document.querySelector("#canvas");if(canvas)canvas.getContext("2d").clearRect(0,0,canvas.width,canvas.height);const receipt=document.querySelector("#receipt");if(receipt)receipt.value="";const status=document.querySelector("#status");if(status)status.textContent="Inputs changed; run again."}))</script></html>

Ship zoom, focus, and support receipts

Before release, capture the baseline at narrow mobile width, ordinary desktop width, and 200-percent zoom. Tab through every interactive target. Repeat with long localized strings and user font scaling where supported. If the draft branch executes, capture the same states and compare overflow, missing content, focus visibility, and unexpected visual backtracking. CSS grid lanes should be reversible with one declaration or enhancement flag.

The release receipt names the specification date, browser versions actually tested, flags or preferences used, parser results, behavior-probe results, fallback screenshots, focus sequence, overflow result, fixture seed, and known limitations. Avoid a global “supported” badge based on one machine. A narrow statement such as “behavior observed in this browser build under this configuration” is both more accurate and easier to update.

Revisit when the CSSWG changes syntax or placement, relevant tests change materially, or interoperable implementation evidence emerges. Until then, retain the regular-grid path as product code, not a temporary comment. Packed density can be beautiful and useful, especially for heterogeneous editorial cards, but visual novelty does not outrank document coherence. A successful progressive enhancement is allowed to disappear while leaving the task intact. That standard lets teams experiment with the draft without transferring its uncertainty to readers.