A deliberately offset editorial grid with authored whitespace and predictable placement.
editorial
offset
editorial
asymmetry
grid
A / arrivalA / arrivalentry
B / pauseB / pausethreshold
C / gatherC / gathercommons
D / workD / workfocus
Usage
usage
import { BrokenOffsetGrid } from "@pinky-ui/layouts";<BrokenOffsetGrid items={projects} columns={3}/>
Props
Prop
Type
Default
Description
items
BrokenOffsetGridItem[]
—
Ordered items with explicit span and vertical offset values.
className
string
—
Styles the outer layout surface.
disabled
boolean
false
Keeps the content and interaction while removing spatial choreography.
Accessibility
Placement is decorative and content order remains the input order.
Focus straightens the active item just as pointer hover does.
Metadata is supplemental and visible without interaction.
Performance
Explicit transforms avoid measurement and layout reflow.
Only one active item and its neighbours receive emphasis.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
Creative portfolios and campaign indexes with intentional negative space.
When not to use
Strictly comparable plans, tables or dense dashboards.
Skill
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.