reading-flow examples

reading-flow: grid-rows, with subgrid and placed items

Item 1 Item 2 Item 3

This example has a grid layout with positioned items. It contains a subgrid—visually the center section with the pink border. The parent grid has reading-flow: grid-rows.

The tab order is therefore Item 3, then the subgrid item and its children (Item 4, Item 5, Item 6), Item 1, Item 2.

The reading-flow property doesn't inherit, therefore the subgrid children are tabbed to in DOM order. To cause the children of the subgrid to also use reading flow, add reading-flow: grid-rows to that element as well.