# Masonry Grid — Build Pack

Component build specification for the dev team.

| | |
|---|---|
| Component | Photos / Listings / Masonry Grid |
| ID | `photos-listings-masonry` |
| Cardinality | photo[] (the in-album gallery) |
| Container | 12C, full content width (1376) |
| Pattern | Column masonry (shortest-column placement) |
| Sibling | Justified Rows (`photos-listings-justified-rows`) |
| Version | WDS v3.0 |
| Generated | 2026-07-14 |

Masonry Grid presents a set of photos as a dense wall of fixed-width columns. Each photo keeps its aspect and the columns ragged-stack to different heights. Use when a denser, browse-heavy wall is wanted and an uneven bottom edge is acceptable; otherwise use Justified Rows (the default).

## Parts

| # | Part | Data | Notes |
|---|------|------|-------|
| 1 | Column | — | Fixed-width vertical track; count is a setting (2 to 6) |
| 2 | Photo cell | Web Original | Column width, height = width / aspect; never cropped; links to the Viewer |
| 3 | More affordance | — | Per-photo overflow (`more_horiz`), top-right on hover |
| 4 | Sponsor watermark | Sponsor logo | Optional per-photo lockup, bottom-right |
| 5 | Gutter | — | Fixed 16px between columns and cells |

## Algorithm

1. Fix the column count `C`; each column width is `(W − G x (C − 1)) / C`.
2. Place each photo, in order, into the currently shortest column; its height is `colWidth / aspect`.
3. Columns end at different heights (ragged bottom). No row alignment, no per-row scaling.
4. Responsive: drop a column as the width narrows; gutter stays fixed.

```
columns C = 4   (fewer on narrow)
gutter  G = 16
```

## Typography

None, as per Justified Rows. Photo metadata lives in the Viewer.

## Notes

- Same photo cell and 16px gutter as Justified Rows; only the packing differs (columns vs rows).
- No cropping in either component.
- Dark-only for now; both modes required at ship.