Masonry
- 741 installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
masonry is a Claude Code skill that designs, optimizes, and audits Pinterest-style masonry layouts with varying item heights for developers building image galleries, portfolios, or discovery feeds.
About
masonry is a marketing-skills component guide at version 1.1.1 from kostja94/marketing-skills that helps developers implement waterfall grids where items stack in columns without fixed rows, filling vertical gaps like a brick wall. The skill covers masonry layout design for galleries, portfolios, and discovery platforms, plus masonry SEO considerations and crawl-friendly structure so search engines index uneven-height content feeds. It triggers on keywords like masonry grid, Pinterest layout, waterfall layout, brick layout, and varying-height grid. Developers reach for masonry when replacing rigid CSS grids with gap-filling columns, auditing an existing gallery for layout shift or scroll jank, or validating that a discovery feed remains crawlable while using dynamic item heights.
- Guides masonry layout design for content with varying heights that stack in columns like a brick wall
- Clear decision table: use masonry for varying heights, image-heavy galleries, portfolios and discovery experiences
- Direct comparison tables contrasting Masonry vs Grid vs Bento vs Carousel with structure and best-use cases
- Triggers on keywords including masonry layout, Pinterest layout, waterfall layout, brick layout, and gallery layout
- First-use explanation mode that introduces value before delivering implementation guidance
Masonry by the numbers
- 741 all-time installs (skills.sh)
- +8 installs in the week ending Jul 25, 2026 (Skillselion tracking)
- Ranked #497 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill masonryAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 741 |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you implement a Pinterest-style masonry layout?
When they need expert guidance on implementing Pinterest-style masonry layouts with varying item heights for image galleries, portfolios, or discovery feeds.
Who is it for?
Frontend developers building image galleries, portfolios, or discovery feeds that need uneven-height items without rigid row grids.
Skip if: Teams needing uniform card grids with fixed row heights, native mobile-only layouts, or full site crawlability audits beyond masonry-specific SEO.
When should I use this skill?
The user mentions masonry layout, Pinterest grid, waterfall layout, brick layout, varying-height gallery, or masonry SEO.
What you get
Masonry grid spec, column gap rules, SEO-friendly markup guidance, and scroll UX audit notes.
- Masonry layout specification
- SEO markup recommendations
By the numbers
- Skill version 1.1.1 in marketing-skills metadata
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use masonry for waterfall column layout and gallery SEO; use site-crawlability when the problem is whole-site indexing beyond masonry grids.
FAQ
What is a masonry layout in the masonry skill?
The masonry skill defines masonry as columns that stack items without distinct rows, letting shorter tiles fill gaps beneath taller ones like a brick wall. It targets image galleries, portfolios, and discovery feeds with varying content heights.
Does the masonry skill cover SEO?
The masonry skill at version 1.1.1 includes masonry SEO guidance for crawlable markup on uneven-height feeds. For broader site crawl audits beyond masonry grids, the related site-crawlability skill is recommended.
Is Masonry safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.