masonry

SKILL.md

Components: Masonry Layout

Guides masonry layout design for content with varying heights. Masonry stacks items in columns without distinct rows; items fill gaps like a brick wall. Best for image galleries, portfolios, and discovery-focused platforms.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

When to Use Masonry

Use masonry when
Use grid when

Varying heights
Equal-height items

Image-heavy; varied aspect ratios
Products, templates (consistent)

Gallery, portfolio, showcase
Card grid

Discovery, browsing; visual-first
Structured browsing

See grid for equal-height grid; card for card structure.

Masonry vs Grid vs Bento vs Carousel