In this example:

Ajax Load More will render query results in a CSS Grid layout.


Prefetching data with Ajax Load More

Data Prefetching with Ajax Load More

Improve the perceived loading times of Ajax Load More requests with the new prefetching...

Release Notes Image

Ajax Load More 7.2

Query Loop integration, previews, and more future proofing.

Release Notes Image

Ajax Load More 7.0

Refactoring Ajax Load More for the future.

Tracking pageviews with Google Analytics 4

Tracking Pageviews with Google Analytics 4

Measuring page views automatically with GA4 and Ajax Load More.

Release Notes Image

Ajax Load More 5.6

A release focused on new features, facet filtering and extending existing functionality.

Openverse and Instant Images plugin

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;
}
CSS

The 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.