v137 · css · accessibility

Card Grid Reorder

Nine cards are placed in a visual grid order that differs from their DOM order (cards 1-9 are placed at different grid positions). Without reading-flow: grid-rows, Tab follows DOM order. With it, Tab follows the visual grid row-by-row — the order a sighted user sees. Toggle the property and tab through to observe.

Interactive grid

Checking reading-flow support…
(Tab through the cards to observe order change)

Tab-focus sequence:

Current tab order: DOM order: 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 9
Focus a card then Tab through…

DOM 1Alpha

grid-col:3, row:2

DOM 2Beta

grid-col:1, row:1

DOM 3Gamma

grid-col:2, row:3

DOM 4Delta

grid-col:3, row:1

DOM 5Epsilon

grid-col:1, row:3

DOM 6Zeta

grid-col:2, row:1

DOM 7Eta

grid-col:1, row:2

DOM 8Theta

grid-col:3, row:3

DOM 9Iota

grid-col:2, row:2

/* Without reading-flow — Tab follows DOM order: 1, 2, 3, 4, 5, 6, 7, 8, 9 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* With reading-flow — Tab follows visual grid rows: 2, 6, 4, 7, 1, 9, 5, 3, 8 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .card-grid.with-reading-flow { reading-flow: grid-rows; }
Why this matters: Designers often use grid-column / grid-row to place items in a visual order that differs from the DOM order (e.g. a "featured" card placed at the top). Without reading-flow, keyboard users and screen readers navigate in DOM order — out of sync with what's on screen. Chrome 137's reading-flow: grid-rows makes focus order match visual order without changing the DOM.

see also