Ready Component · Listings

Justified Rows

Row-based, the Flickr approach: equal-height rows scaled to fill the width.

Bucket: ListingsCardinality: photo[]Pattern: Flickr justified-layout

↓ Download build packReady to build. Markdown spec to prompt and build from. Generated 14 Jul 2026WDS v3.0 PatternFlickr justified-layout Sketch pageWIP: Components > Photos > Album Listing

Details

Container · 12C (full content width)

TierComponent

FamilyPhotos

BucketListings

ComponentJustified Rows

Cardinalityphoto[] (the in-album gallery)

SiblingMasonry Grid (column-based)

Canonical namePhotos / Listings / Justified Rows

IDphotos-listings-justified-rows

Notes

The gallery lays out live from each photo's real aspect ratio (sample photos are ION event uploads). Rows fill the full width; heights flex within the bounds.
The page theme toggle flips the surface behind the gallery; the photos are mode-agnostic.

Component Anatomy

#	Part	Colour	Data	Notes
1	Row	—	—	A horizontal band of 2 to 4 photos sharing one height. Rows stack top to bottom.
2	Photo cell	—	Web Original	One photo at its real aspect ratio, never cropped. Width = row height x aspect. Links to the Viewer.
3	More affordance	Icon (White)	—	Per-photo overflow (`more_horiz`), top-right on hover. White over media. See Icons.
4	Sponsor watermark	—	Sponsor logo	Optional per-photo lockup, bottom-right, carried by the album's sponsor.
5	Gutter	—	—	Fixed 16px between cells and between rows. Never scales.

How it lays out

Flow photos into a row left to right, summing their aspect ratios (aspect = width / height).
The height that fills the width is h = (W − gutter x (n − 1)) / Σ aspect, where n is the photos in the row and W the content width.
Close the row once h has fallen to the target (with at least 2 photos in), or once it reaches the max count (4).
Clamp the final h to [min, max]; each photo's width becomes h x aspect. Left-align the last partial row at the target height, don't stretch it.
Deterministic from the photos, the content width and the bounds. Recompute on resize, so narrower viewports simply hold fewer photos per row.
Production uses the open-source library, not a reimplementation: Flickr's justified-layout (npm i justified-layout). The build pack maps our rules to its config. The gallery above is a lightweight demo of the same maths. Note the 2 to 4 per row is emergent from the target height, not a library option.

Spacing

Value	Default	Applies to
Gutter	16 md	Between cells and between rows, constant
Target height	300	The height a row aims for before it closes
Min height	220	Floor after justifying to width
Max height	380	Ceiling after justifying to width
Per row	2 to 4	Minimum and maximum photos on a row

Notes

Defaults, to lock. Taken from the Sketch Album Listing artboard (rows measured 314 / 326 / 416 on the 1376 grid) and tuned toward a slightly shorter target.
The gutter is the only fixed dimension; row heights are computed, so the wall stays flush left and right at any width.

Typography

Notes

Not applicable. The listing carries no text; a photo's date, tags, session and event live in the Viewer.

Examples

The live gallery above is the example: reshape the window or the controls to see the rows re-justify.

Notes

Compare with the Masonry Grid sibling: same photos, column-based, ragged rather than justified.
Static example renders and a Light-mode surface pass follow once the component is finished in Sketch.

Components · Photos · Listings · Justified Rows
The default album-listing layout. Deterministic rows, no cropping, flush edges. Live gallery on real event photos.