# Masonry

Compare the same six resources.

ID: masonry
Language: en
Revision: 3
Translation source revision: 3
Canonical: https://kickoff.jujin.dev/en/catalog/masonry/

## Why: the goal or problem

Images and notes have uneven heights. Forcing equal rows can waste space or crop information that readers need.

## How: work toward a solution

All six layouts use the same six resources, labels, and colors. Filter a topic, reverse collection order, open study notes, or narrow the preview. Compare the reading flow while the content stays the same. Reset or reload restores the full collection and original order. Different heights fill the shortest column; expanded notes trigger repacking without changing DOM order.

## What: the concept

**Masonry** — Cards of different heights enter the shortest available column.

Test keyboard order and overlap after expansion; on narrow screens use one column.

[W3C](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)