Asymmetric Editorial Grid
An authored editorial rhythm where featured work earns space and supporting pieces keep the composition breathing.
- editorial
- asymmetry
- hierarchy
- whitespace
Arrival Commons Quiet Trace
Usage
usage
import { AsymmetricEditorialGrid } from "@pinky-ui/layouts";
<AsymmetricEditorialGrid items={projects} columns={3} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AsymmetricEditorialGridItem[] | — | Ordered content with optional featured and span intent. |
| columns | 2 | 3 | 4 | 3 | Desktop column count; compact layouts cap at two. |
| gap | number | 16 | Space between editorial planes, in px. |
Accessibility
- Items stay in input order even when spans create whitespace.
- Hover and focus share the same local emphasis.
- Labels remain visible without pointer interaction.
Performance
- Placement is CSS Grid with no measurement pass.
- A single active id drives emphasis rather than pointer-frame React renders.
Reduced motion
The hierarchy and whitespace remain; lift and neighbour emphasis resolve to a still grid.
When to use
- Editorial indexes, portfolios and campaign landings.
- Small collections where one piece needs a clear lead.
When not to use
- Dense comparison tables or unbounded feeds.
- Collections where every item must have equal visual weight.