Masonry Grids with Scroll Animations
Create gap-free masonry grids with tightly packed columns and align them at the bottom with smooth scroll animation directly in the page builder.
Masonry grids arrange items with different heights into compact, gap-free columns. The layout adapts to your content automatically, keeping galleries, portfolios, blog posts and other item-based layouts balanced without forcing fixed heights.
Choose whether columns should be filled based on the available space for a tightly packed layout with more even column heights, or keep the original item order for a more structured content flow.
You can also add a scroll animation to justify masonry grid columns with just a click. Columns move at different speeds while scrolling and reach the bottom at the same time. If grid columns have similar heights, the animation is very subtle, making the grid look perfectly aligned at both the top and bottom. Larger height differences create a more noticeable scroll effect.
If the grid columns are taller than the viewport, you can keep their top and bottom edges visually aligned while scrolling. Simply start the animation when the top of the grid leaves the viewport, and end it as soon as the bottom enters the viewport.
This creates a smooth masonry layout with better alignment at the bottom, without manually matching image or content heights.
