Justify Columns on Scroll

Grid columns do not always have the same height. For example, they may contain an uneven number of items, or the items themselves may have different heights, as in a masonry grid. With the YOOtheme Pro builder, you can add a scroll animation with just one click to justify grid columns, so they reach the bottom at the same time.

If the 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 prominent 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 scroll effect creates a smooth, balanced grid layout without manually matching column heights.