Choose grid layout

Changes the layout of the grid below, affecting tab order.

Choose reading-flow direction

Changes the reading direction of the grid below, altering keyboard navigation order.

Now use the Tab key to navigate around the grid.

Grid ,

Suggested option:

About

The CSS grid layout method has transformed frontend development; however, its flexibility can pose challenges for some users. It's easy to create situations where the visual order does not match the source order in the DOM. Since the source order determines how the browser navigates the page using a keyboard, this can lead to unexpected jumps for users relying on keyboard navigation.

The reading-flow property has been introduced in the CSS Display specification to help address this long-standing issue.

Note: The text above is an edited version of the introduction to Use CSS reading-flow for logical sequential focus navigation (from the Chrome for Developers Blog).