Flexbox
Creating a responsive Ajax Load More grid with Flexbox
In this example:
Ajax Load More will use CSS3 Flexbox to create a flexible and responsive grid for displaying posts.

Ajax Load More Post Example
Cras justo odio, dapibus ac facilisis in, egestas eget...

Donec ullam corper nulla metus auctor frinel
Sociis natoque penatibus et magnis dis parturient montes, nascetur...

Lorem Ipsum Maec diam eget risus varius blandit
Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus...

Pellentesque ornare sem lacinia quam venenatis vestibulum
Maecenas faucibus mollis interdum. Morbi leo risus, porta ac...

Diam eget risus varius blandit sit amet
Maecenas faucibus mollis interdum. Morbi leo risus, porta ac...
CSS
The following CSS was used to create the Flexbox layout 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 22 23 |
.alm-listing.flexbox .alm-reveal{ display: flex; flex-wrap: wrap; width: 100%; } .alm-listing.flexbox .flex-item{ flex: 1 0 180px; justify-content: space-around; margin: 10px; padding: 10px; background: #f7f7f7; border: 1px solid #efefef; } .alm-listing.flexbox .flex-item img{ display: block; } .alm-listing.flexbox .flex-item h3{ padding: 15px 15px 0; font-size: 16px; } .alm-listing.flexbox .flex-item p{ font-size: 12px; } |
The following shortcode was used to create the Flexbox example.
[ajax_load_more preloaded="true" repeater="template_34" post_type="ajax_more" pause="true" transition="fade" images_loaded="true" button_label="Load More" button_loading_label="Loading..." container_type="div" css_classes="flexbox"]
The following Repeater Template was used to create the Flexbox example.
1 2 3 4 5 6 7 8 9 |
<div class="flex-item"> <?php if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('alm-cta'); ?></a> <?php }?> <div class="details"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <?php the_excerpt(); ?> </div> </div> |