CSS Grid | Examples | Ajax Load More

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"]