Masonry
Design or audit Pinterest-style masonry grids for image-heavy galleries, portfolios, and discovery pages without breaking crawl-friendly layout patterns.
Overview
Masonry is an agent skill for the Build phase that helps solo builders design, optimize, and audit Pinterest-style varying-height column layouts for galleries and discovery pages.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill masonryWhat is this skill?
- Decision table for masonry vs equal-height grid based on content shape and aspect ratios
- Side-by-side comparison of grid, masonry, bento, and carousel layouts with best-fit scenarios
- Guidance tuned for galleries, portfolios, and visual-first discovery browsing
- Cross-links to grid and card skills for equal-height and card-structure alternatives
- Points to site-crawlability when masonry affects crawl and infinite-scroll UX
- Compares four layout patterns: grid, masonry, bento, and carousel in a single reference table
Adoption & trust: 715 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have mixed-aspect-ratio media and need a layout that feels visual and dense without forcing every tile into the same row height as a product grid.
Who is it for?
Marketing sites, portfolios, and content products where images dominate and users browse rather than compare uniform catalog cards.
Skip if: Equal-height product grids, strict tabular data, or pages where SEO and crawlability depend on simple document order without coordinating site-crawlability.
When should I use this skill?
User wants to design, optimize, or audit masonry (Pinterest-style) layouts, or mentions masonry grid, waterfall layout, brick layout, gallery layout, or masonry SEO.
What do I get? / Deliverables
You get a clear masonry-vs-alternatives decision, layout constraints, and implementation-oriented guidance you can hand to your front-end stack.
- Masonry vs grid (and related layout) recommendation with rationale
- Layout audit notes for gallery or discovery use cases
Recommended Skills
Journey fit
Masonry is a front-end layout pattern decision applied while building pages and components, before ship-time performance and launch-time SEO passes. The skill focuses on column-based varying-height grids, layout comparisons, and gallery UX—core frontend composition work.
How it compares
Layout-pattern guidance skill for varying-height discovery UI—not a CSS framework install or an MCP server.
Common Questions / FAQ
Who is masonry for?
Solo and indie builders shipping marketing or content front ends who need Pinterest-style grids for galleries, portfolios, or visual discovery without guessing when masonry beats a standard grid.
When should I use masonry?
Use it during Build (frontend) when designing or auditing masonry, waterfall, brick, or gallery layouts—and when stakeholders mention masonry SEO or Pinterest-style grids; coordinate crawl/scroll concerns with site-crawlability before launch.
Is masonry safe to install?
It is documentation-style procedural knowledge with no shell or network permissions; review the Security Audits panel on this Prism page before adding any skill to your agent workflow.
SKILL.md
READMESKILL.md - Masonry
# 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](https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly) ## 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*