Unstable positions make it impossible to go back
Aliases: layout drift · unstable masonry · lost pin
What it is
You saw a red jacket midway down column three, scrolled away, came back, and it is at the bottom of column one — or gone, shoved by a newly inserted pin. In masonry, each item’s (x, y) is a function of every previous height plus the current column count. Breakpoints change the count, a prepend lands at the top, the window widens, and every coordinate moves. Spatial memory dies; “back to where I was” becomes search.
That is not the first-read scramble. You can accept a messy first pass and still need a coordinate that will still be there.
Why it happens
Shortest-column insertion makes position depend on the prefix. One extra item in the prefix can restation everything after it. Width changes, two columns become three, the function recomputes. Infinite scroll makes the prefix longer and more often mutated (refresh, live insert). What people store is a coarse “about column three, halfway”; that description expires when the function does.
In a rowed grid, item n sits near row n/k, still estimable after a width change. Masonry has no row index to estimate from.
Where it stops holding
One-shot discovery feeds that never expect a return can live with instability and substitute Save for spatial memory. A saved collection that still masonries and still prepends will lose items the same way. A single-column timeline only moves along y, more stable than multi-column, though a top insert still shoves — that is insertion policy, not masonry-only, but masonry then multiplies the y error by a column change.
Commerce and libraries that claim “resume browsing” turn instability into lost items, duplicates, and jackets not bought.
Applying it
- On surfaces that must be returned to, drop masonry, or freeze column count and prefix for the session (append only, no prepend).
- Offer a non-spatial re-entry: search, filters, saves, recently viewed. Do not bet on “column three.”
- How to check: note an item’s place in the viewport, then do three things — drag from two columns to three, prepend one item, leave and come back. Each time, point at the item without search. One miss in three is unstable. If the product claims browsing is resumable, all three must hit; otherwise change the layout or add Recently viewed.
Related
- Same group: F2.09.1 Masonry fits visual work whose size is part of the content · F2.09.2 Uneven column heights scramble reading order
- Nearby: F1.06 Positional stability of frequent actions · F2.10 Responsive breakpoints · E5.07 Infinite scroll
- Search terms:
spatial memory·masonry reflow·unstable layout·resume browsing