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

Layout	Structure	Best for
Grid	Equal rows and columns; uniform items	Products, templates, features
Masonry	Columns; items stack without rows; gaps filled	Pinterest, Behance; varied content
Bento	Intentional sections; predefined sizes	Homepage, dashboard; Apple-style
Carousel	Slides; one/few visible; swipe/click	Testimonials, logos, featured items; see carousel

Masonry Structure

Element	Purpose
Columns	2–4 columns; fluid or fixed
Items	Varying heights; natural aspect ratio
Gap	Consistent horizontal and vertical spacing
Order	Top-to-bottom fill within columns

Implementation

• CSS columns: column-count; simple, no JS; but items flow top-to-bottom then next column
• Masonry.js / libraries: True masonry (left-to-right fill); may need JS
• CSS Grid + grid-auto-flow: dense: Approximate; no JS; see grid for dense grid

Note: Pure masonry can create accessibility challenges (screen reader order); ensure logical DOM order.

SEO Considerations

Masonry + infinite scroll = content not crawlable. Masonry galleries often use infinite scroll or lazy load; crawlers cannot emulate scroll or "Load more" clicks, so content beyond the initial view is not discoverable.

If you use	Then
Infinite scroll	Provide paginated component pages with full URLs; implement pushState; see site-crawlability for search-friendly infinite scroll
Lazy load	Ensure content exists in HTML or is reachable via crawlable links
Pagination	Prefer for SEO-critical content; crawlers can follow next/prev links

Reference: Google – Infinite scroll search-friendly recommendations

Best Practices

Principle	Practice
Visual-first	Thumbnails; minimal text
Aspect ratio	Preserve original; avoid forced cropping
Lazy load	Many images; load on scroll
Performance	Masonry can be heavy; consider grid for simpler cases

Use Cases

Use case	Format	Page Skill
Showcase / Gallery	User work; varied sizes	showcase-page-generator
Portfolio	Projects; mixed media	—
Pinterest-style	Pins; discovery	—
Image-heavy blog	Blog with varied images	blog-page-generator

Related Skills

• site-crawlability: Infinite scroll SEO; paginated component pages; search-friendly implementation
• grid: Equal-height grid; when masonry is overkill
• carousel: Carousel for slides/rotation; when masonry is overkill
• card: Card structure; masonry often uses cards
• showcase-page-generator: Gallery masonry
• image-optimization: Lazy load, aspect ratio, LCP