CSS Grid
Infinite scroll Ajax Load More query results in a CSS Grid layout
In this example:
Ajax Load More will render query results in a CSS Grid layout.

Tracking Pageviews with Google Analytics 4
Measuring page views automatically with GA4 and Ajax Load More.

Ajax Load More 5.6
A release focused on new features, facet filtering and extending existing functionality.

Instant Images Adds Openverse API Integration
Instant Images now offers API integrations with Unsplash, Openverse, Pixabay and Pexels, providing access...
CSS
The following CSS was used to create the CSS Grid example.
.alm-listing.css-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media screen and (min-width:480px) {
.alm-listing.css-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width:1024px) {
.alm-listing.css-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.alm-listing.css-grid>div {
padding-bottom: 25px;
border-radius: 2px;
border: 1px solid #efefef;
}
CSSThe following shortcode was used to create the CSS Grid example.
[ajax_load_more preloaded="true" preloaded_amount="6" theme_repeater="css-grid.php" post_type="ajax_more, post" button_label="Show More" button_loading_label="Loading..." container_type="div" css_classes="css-grid" posts_per_page="6" images_loaded="true" transition_delay="25" pause="true" pause_override="true"]
The following Repeater Template was used to create the CSS Grid example.