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 whenUse grid whenVarying heightsEqual-height itemsImage-heavy; varied aspect ratiosProducts, templates (consistent)Gallery, portfolio, showcaseCard gridDiscovery, browsing; visual-firstStructured browsing

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

Masonry vs Grid vs Bento vs Carousel#

LayoutStructureBest forGridEqual rows and columns; uniform itemsProducts, templates, featuresMasonryColumns; items stack without rows; gaps filledPinterest, Behance; varied contentBentoIntentional sections; predefined sizesHomepage, dashboard; Apple-styleCarouselSlides; one/few visible; swipe/clickTestimonials, logos, featured items; see carousel

Masonry Structure#

ElementPurposeColumns2–4 columns; fluid or fixedItemsVarying heights; natural aspect ratioGapConsistent horizontal and vertical spacingOrderTop-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 useThenInfinite scrollProvide paginated component pages with full URLs; implement pushState; see site-crawlability for search-friendly infinite scrollLazy loadEnsure content exists in HTML or is reachable via crawlable linksPaginationPrefer for SEO-critical content; crawlers can follow next/prev links

Reference: Google – Infinite scroll search-friendly recommendations

Best Practices#

PrinciplePracticeVisual-firstThumbnails; minimal textAspect ratioPreserve original; avoid forced croppingLazy loadMany images; load on scrollPerformanceMasonry can be heavy; consider grid for simpler cases

Use Cases#

Use caseFormatPage SkillShowcase / GalleryUser work; varied sizesshowcase-page-generator****PortfolioProjects; mixed media—Pinterest-stylePins; discovery—Image-heavy blogBlog with varied imagesblog-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