masonry
Master the art of arranging images and content in dynamic, responsive masonry grids. This skill equips you with techniques to create visually balanced galleries and portfolio displays that adapt seamlessly across devices. Perfect for designers and developers building modern, gallery-driven interfaces.
Masonry layout design arranges images and content in a dynamic grid where items of varying heights flow naturally into available vertical spaces, similar to a brick wall. Masonry skill teaches you to create visually balanced galleries and portfolio displays that adapt seamlessly across devices, using CSS columns, JavaScript libraries, or modern CSS Grid techniques to optimize the arrangement for both aesthetics and performance.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-09
Masonry layout design arranges images and content in a dynamic grid where items of varying heights flow naturally into available vertical spaces, similar to a brick wall. Masonry skill teaches you to create visually balanced galleries and portfolio displays that adapt seamlessly across devices, using CSS columns, JavaScript libraries, or modern CSS Grid techniques to optimize the arrangement for both aesthetics and performance.
Use it when
- Masonry enables you to build galleries where items of different heights fill available space efficiently without forced uniformity.
- Masonry layout optimization for SEO involves ensuring search engines can crawl and index all gallery items properly.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
kostja94/marketing-skills/masonry
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is masonry layout design and how does it work?
Masonry layout design arranges images and content in a dynamic grid where items of varying heights flow naturally into available vertical spaces, similar to a brick wall. Masonry skill teaches you to create visually balanced galleries and portfolio displays that adapt seamlessly across devices, using CSS columns, JavaScript libraries, or modern CSS Grid techniques to optimize the arrangement for both aesthetics and performance.
How do I build a masonry gallery with different heights?
Masonry enables you to build galleries where items of different heights fill available space efficiently without forced uniformity. You can implement this using CSS masonry-columns for simple layouts, CSS Grid with auto-placement, or JavaScript-based solutions. Masonry skill covers design patterns that maintain visual balance while accommodating varying content dimensions, ensuring responsive behavior across all screen sizes.
What are the masonry SEO best practices?
Masonry layout optimization for SEO involves ensuring search engines can crawl and index all gallery items properly. Masonry skill teaches you to structure HTML semantically, implement proper heading hierarchies, use descriptive alt text for images, and avoid blocking content behind JavaScript. Best practices include lazy loading with proper link structure, pagination for crawlability, and ensuring masonry doesn't prevent search engines from discovering all portfolio or gallery content.
How does masonry compare to grid and other layout options?
Masonry differs from traditional grid layouts by allowing items to fill vertical space dynamically rather than forcing uniform rows. Masonry skill helps you choose between masonry for image galleries, CSS Grid for structured layouts, bento designs for mixed content, and carousels for limited space. Each approach serves different purposes: masonry excels for portfolios and image galleries, while grids work better for data tables and structured content displays.
How can I optimize masonry layouts for performance and accessibility?
Masonry layout optimization requires balancing visual appeal with technical performance. Masonry skill covers lazy loading images to reduce initial load time, implementing proper ARIA labels for screen readers, ensuring keyboard navigation works throughout the gallery, and using efficient CSS or JavaScript solutions. Performance tips include minimizing reflows during layout calculations, using CSS containment, and testing accessibility with assistive technologies to ensure all users can navigate your portfolio or gallery.
Can I use masonry with infinite scroll and lazy loading?
Masonry supports lazy loading and pagination for dynamic content loading. Masonry skill teaches you to implement these features while maintaining layout stability and SEO crawlability. Infinite scroll works with masonry by appending new items and recalculating the layout, while lazy loading defers image loading until items enter the viewport. The skill emphasizes balancing user experience with search engine requirements, ensuring pagination links remain accessible for proper indexing.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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 |
(truncated - see the full file via the links below)
File tree — 1 file
skills/components/layout/masonry/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Design and implement masonry layouts for image galleries and portfolios”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill helps you identify and resolve technical barriers preventing search engines and AI crawlers from accessing your web pages. Run diagnostics on robots.txt, sitemap configuration, and indexation blockers, then apply targeted fixes to improve discoverability across search and AI platforms.
Selecting the right rendering method directly impacts your site's SEO performance and user experience. This skill guides you through the tradeoffs between static site generation, server-side rendering, client-side rendering, and incremental static regeneration—helping you match each approach to your specific content requirements and business goals.
Translation handles the complete localization workflow—from project briefing through native review—with structured guidance on glossary and style guide development. It helps teams choose between human and machine translation based on content type, manage terminology consistency across markets, and maintain SEO integrity in translated pages.
This skill helps you identify and resolve indexing problems that prevent your web pages from appearing in Google search results. It guides you through common crawl and indexation blockers, then walks you through targeted fixes to get your content discoverable and ranked.
xml-sitemap enables AI agents to programmatically create XML sitemaps that improve search engine crawlability and indexing. This skill automates sitemap generation, helping ensure your site's content is discoverable by search engines and properly prioritized for crawling.
This skill enables AI agents to conduct thorough SEO audits by evaluating technical infrastructure, on-page elements, content quality, and backlink profiles. It surfaces actionable insights across all major ranking factors, helping teams prioritize improvements and track performance gains over time.