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 as seen in this example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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; } |
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"]