Advanced Masonry
A flexible masonry layout component with auto-arranging capabilities, customizable columns, reveal animations, and built-in lightbox functionality for image galleries.
Make it with Workshop
Build your own component with AI
This component is part of Framercrafts, a library of supercharged Framer components and overrides.
Description
Advanced Masonry creates responsive grid layouts that automatically arrange content in an optimal way. The component supports multiple columns with intelligent item placement, animated reveal effects, and an optional lightbox for image viewing. It detects when elements enter the viewport to trigger animations and handles different screen sizes with responsive behavior.
Use Cases
1. Image Galleries - Display photos in an efficient, visually appealing grid
2. Portfolio Websites - Showcase work samples in a professional layout
3. Content Feeds - Present articles, cards, or posts in a dynamic grid
4. Product Listings - Organize products in a space-efficient layout
5. Blog Layouts - Display content blocks of varying heights in a clean grid
Customizations
• Layout - Adjust columns, gaps, and arrangement strategy
• Animations - Choose from fade, blur, or grayscale reveal effects
• Timing - Control animation duration, stagger, and easing
• Behavior - Set auto-arrange, reverse order, and column spanning
• Lightbox - Enable built-in image viewer with keyboard navigation
• Responsiveness - Adapt to different screen sizes automatically
