CSS Grid
Infinite scroll Ajax Load More in a CSS Grid layout
In this example:
Ajax Load More will infinite scroll query results in a CSS Grid layout.
CSS
The following CSS was used to create the CSS Grid as seen this example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.alm-listing .css-grid { display: inline-grid; grid-template-columns: 1fr 1fr 1fr; } @media screen and (min-width:480px){ .alm-listing .css-grid{ grid-template-columns: 1fr 1fr; } } @media screen and (min-width:1024px){ .alm-listing .css-grid{ grid-template-columns: 1fr 1fr 1fr; } } .alm-listing .css-grid > div { margin: 0 5px 10px; padding-bottom: 25px; -webkit-border-radius: 2px; 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" transition_container_classes="css-grid" posts_per_page="6"]