Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

reading-flow

The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. The reading-order property overrides this order. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeLayout

Overview

The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. The reading-order property overrides this order. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
reading-flow
Experimental
137
137
137
flex-flow
Experimental
137
137
137
flex-visual
Experimental
137
137
137
grid-columns
Experimental
137
137
137
grid-order
Experimental
137
137
137
grid-rows
Experimental
137
137
137
normal
Experimental
137
137
137
source-order
Experimental
137
137
137
Other
css.properties.reading-order
Experimental

The reading-order CSS property enables changing the order in which a child of a reading flow container is read relative to its element siblings.
137
137
137
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.grid-container {
  display: grid;
  reading-flow: grid-rows;
}

Live demo

grid-rows

CSS Grid-rows demo.

PreviewFullscreen

grid-columns

CSS Grid-columns demo.

PreviewFullscreen

flex-visual

CSS Flex-visual demo.

PreviewFullscreen

Use cases

  • Use reading-flow

    Use reading-flow when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply reading-flow to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test reading-flow in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using reading-flow does not make content harder to perceive, understand, or operate in assistive contexts.

Related links

Powered by web-features