In this example:

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


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

Accessibility and Ajax Load More

Accessibility and Ajax Load More

Building inclusive and accessible websites with Ajax Load More.

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 Repeater Template was used to create the CSS Grid example.