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
Install
kostja94/marketing-skills/masonry
git clone https://github.com/kostja94/marketing-skills
cp -r marketing-skills/skills/components/layout/masonry ~/.claude/skills/masonryFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/components/layout/masonry/SKILL.md