v137 · dom

Masonry Flow

A Pinterest-style masonry grid where DOM order and visual column order diverge. reading-flow: grid-rows (or flex-visual on a columns layout) makes Tab follow the visual row — the card at position (row 1, col 2) is reached before the card at (row 3, col 1), matching what the eye sees.

Feature detection: checking…
Dynamic lane: waiting for insertion.

Press Tab through the cards. Each card shows its DOM index. The focus trace at the bottom lights up the sequence — compare DOM order vs visual flow.

Tab order:

Tab order comparison

mode Tab sequence result
DOM order 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 9 Jumps columns unpredictably
reading-flow: flex-visual Row 1 left→right, then row 2, etc. Matches visual reading order
reading-order overrides Priority cards first (reading-order: -1) Feature cards bubble to front 
/* Columns-based masonry */
.masonry-grid {
  column-count: 3;
  reading-flow: flex-visual;  /* Tab left-to-right across columns */
}

/* Optionally boost a specific card in the sequence */
.featured-card {
  reading-order: -1;  /* visited before other cards */
}

see also