{"enrichment":{"faq":[{"a":"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.","q":"What is masonry layout design and how does it work?"},{"a":"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.","q":"How do I build a masonry gallery with different heights?"},{"a":"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.","q":"What are the masonry SEO best practices?"},{"a":"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.","q":"How does masonry compare to grid and other layout options?"},{"a":"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.","q":"How can I optimize masonry layouts for performance and accessibility?"},{"a":"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.","q":"Can I use masonry with infinite scroll and lazy loading?"}],"shadow_tags":["visual-first-layout","variable-height-content","discovery-browsing","image-gallery-design","column-stacking","gap-filling-algorithm","crawlability-challenge","aspect-ratio-preservation","infinite-scroll-seo"],"summary_rewrite":"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."},"files":[{"bytes":4283,"path":"skills/components/layout/masonry/SKILL.md","sha256":"55ad97adae945bf406511a147066864ad8f07f4d7026042d466920896bdd342e","url":"https://skillfed.io/files/kostja94/marketing-skills/masonry/7b04b367/SKILL.md"}],"id":"kostja94/marketing-skills/masonry","links":{"html":"https://skillfed.io/kostja94/marketing-skills/masonry","md":"https://skillfed.io/kostja94/marketing-skills/masonry.md","repo":"https://github.com/kostja94/marketing-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":109,"language":null,"last_updated":"2026-06-09","license":"MIT","name":"masonry","publisher":"kostja94","stars":762},"relations":{"similar":[{"id":"kostja94/marketing-skills/grid"},{"id":"kostja94/marketing-skills/carousel"},{"id":"kostja94/marketing-skills/showcase"},{"id":"kostja94/marketing-skills/list"},{"id":"kostja94/marketing-skills/card"},{"id":"kostja94/marketing-skills/crawlability"},{"id":"ancoleman/ai-design-components/managing-media"},{"id":"kostja94/marketing-skills/rendering-strategies"},{"id":"Leonxlnx/taste-skill/taste-skill-v1"},{"id":"BND-1/taste-skill/taste-skill"}]},"slug":{"owner":"kostja94","repo":"marketing-skills","skill":"masonry"},"version":"7b04b367"}