Masonry
`<pura-masonry>` is a container that arranges the default slot's elements into vertical columns (top-to-bottom flow, then breaking to the next column), keeping each item intact via break-inside. Use it for image galleries, cards of varying heights, or feeds where a rigid grid would leave gaps. It has an agent-native layer: each instance gets a stable id in `data-pura-masonry` and publishes a machine-readable snapshot in `window.__puraMasonry[id]` with `{ label, columns, count, items }`, letting agents inspect the collection without scraping the DOM.
Preview
<pura-masonry min="12rem" gap="1rem" label="Photo gallery">
<div style="background:#fde68a;border-radius:8px;padding:1rem;height:120px">Sunset</div>
<div style="background:#bfdbfe;border-radius:8px;padding:1rem;height:200px">Snowy mountain</div>
<div style="background:#bbf7d0;border-radius:8px;padding:1rem;height:90px">Forest</div>
<div style="background:#fbcfe8;border-radius:8px;padding:1rem;height:160px">Beach at dawn</div>
<div style="background:#ddd6fe;border-radius:8px;padding:1rem;height:140px">City at night</div>
<div style="background:#fed7aa;border-radius:8px;padding:1rem;height:110px">Desert</div>
</pura-masonry>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
columns | number | (auto) | Fixed column count (integer >= 1). When set, it uses exactly that number of columns at any width and reflects the value in data-columns. |
min | string | 16rem | Minimum width of each column (CSS length). Used in responsive mode (when columns is omitted): the browser fits as many columns as will fit at that width. |
gap | string | var(--pura-space-4) | Spacing between columns and between rows (CSS length). |
label | string | (none) | Accessible name for the list of items; applied as aria-label on the host (role=list). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/masonry.js"></script>import "./pura/lib/masonry.js";