CSS Grid

Infinite scroll Ajax Load More in a CSS Grid layout

In this example:

Ajax Load More will display results in a CSS Grid layout.

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 theme_repeater="css-grid.php" button_label="Show More" button_loading_label="Loading data..." container_type="div" css_classes="css-grid" posts_per_page="6"]

The following Repeater Template was used to create the CSS Grid example.