Use for an authored editorial grid whose vertical offsets and spans create negative space without random placement.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
A / arrivalA / arrivalentry
B / pauseB / pausethreshold
C / gatherC / gathercommons
D / workD / workfocus
Purpose
Use for an authored editorial grid whose vertical offsets and spans create negative space without random placement.
Use when
A creative index needs visual rhythm beyond equal rows.
Every offset can be reviewed as part of the design.
Avoid when
Users compare prices, metrics or dense records.
Offset values come from unstable content measurements.
Hover and focus
Let the focused item straighten and lift slightly while nearby items quiet. A caption may emerge from the negative space, but the label must remain available without hover.
Touch and reduced motion
Normalize offsets and spans on compact layouts. Reduced motion uses a plain grid; reading and focus order never depend on the broken geometry.