In this example:
Ajax Load More and Masonry combine to create an infinite scrolling flexible grid layout.

Masonry is a popular JS plugin used to place elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

🔥  Ajax Load More 3.1+ has built-in support for Masonry → view blog post

    The following CSS is used to layout the .grid-item elements within Masonry.


    The following shortcode was used to create the Masonry example.

    [ajax_load_more repeater="template_8" post_type="post" posts_per_page="4" label="Load More" transition="masonry" masonry_selector=".grid-item"]


    The following Repeater Template was used to create the Masonry example.