Ready
Component · Listings
↓
Download build packReady to build. Markdown spec to prompt and build from.
PatternColumn masonry (shortest-column)
SiblingJustified Rows
Masonry Grid
Column-based: fixed-width columns, photos stacked down the shortest.
01
Details
Container · 12C (full content width)
TierComponent
FamilyPhotos
BucketListings
ComponentMasonry Grid
Cardinalityphoto[] (the in-album gallery)
SiblingJustified Rows (row-based)
Canonical namePhotos / Listings / Masonry Grid
IDphotos-listings-masonry
Notes
- Fixed-width columns; each photo keeps its aspect and the column heights ragged-stack. Same sample photos as the Justified Rows sibling.
- Note the uneven bottom edge and that rows do not align across columns. That is the trade for a denser wall.
02
Component Anatomy
| # | Part | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Column | — | — | A fixed-width vertical track. Column count is a setting (2 to 6); width = (W − gutters) / columns. |
| 2 | Photo cell | — | Web Original | One photo at column width, height = width / aspect. Never cropped. Links to the Viewer. |
| 3 | More affordance | Icon (White) | — | Per-photo overflow (more_horiz), top-right on hover. See Icons. |
| 4 | Sponsor watermark | — | Sponsor logo | Optional per-photo lockup, bottom-right. |
| 5 | Gutter | — | — | Fixed 16px between columns and between cells. |
How it lays out
- Fix the column count; each column width is
(W − gutter x (cols − 1)) / cols. - Place each photo, in order, into the currently shortest column; its height is
colWidth / aspect. - Columns end at different heights (ragged bottom). No row alignment, no per-row scaling.
03
Spacing
| Value | Default | Applies to |
|---|---|---|
| Columns | 4 | Column count at full width (fewer on narrow) |
| Gutter | 16 md | Between columns and between cells, constant |
Notes
- Responsive: drop a column as the width narrows. The gutter stays fixed; column width absorbs the change.
04
Typography
Notes
- Not applicable, as per Justified Rows. Photo metadata lives in the Viewer.
05
Examples
The live grid above is the example: change the column count or resize the window.
Notes
- Use Masonry for a dense, browse-heavy wall where a ragged edge is acceptable; use Justified Rows when the grid should read as tidy aligned rows. Justified Rows is the default for album listings.
Components · Photos · Listings · Masonry Grid
The dense alternative to Justified Rows. Ragged columns; use when an uneven bottom edge is acceptable.
The dense alternative to Justified Rows. Ragged columns; use when an uneven bottom edge is acceptable.