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.
A New Chapter for Ajax Load More
Ajax Load More has a new home. Discover documentation, demos, premium add-ons, support resources,...
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.
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.