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.
Data Prefetching with Ajax Load More
Improve the perceived loading times of Ajax Load More requests with the new prefetching...
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 Template was used to create the CSS Grid example.