# Masonry

Compare the same six resources.

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

## Concept

Cards of different heights enter the shortest available column.

## Example

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.

## When to choose it

Choose it for visual collections. Test keyboard order and overlap after expansion; on narrow screens use one column.

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