Add example code for creating an archive grid

[salcode]

[bryanwillis]

Needs some improving upon... but it works.

function bsg_grid_loop_pagination( $query = false ) {
    global $wp_query;
    if( !isset( $query ) || empty( $query ) || !is_object( $query ) )
        $query = $wp_query;
    if( ! ( $query->is_home() || $query->is_archive() ) )
        return false;
    return array(
        'features_on_front' => 1,
        'teasers_on_front' => 6,
        'features_inside' => 0,
        'teasers_inside' => 10,
    );
}

function bsg_grid_loop_query_args( $query ) {
    $grid_args = bsg_grid_loop_pagination( $query );
    if( $query->is_main_query() && !is_admin() && $grid_args ) {
        // First Page
        $page = $query->query_vars['paged'];
        if( ! $page ) {
            $query->set( 'posts_per_page', ( $grid_args['features_on_front'] + $grid_args['teasers_on_front'] ) );
        // Other Pages
        } else {
            $query->set( 'posts_per_page', ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) );
            $query->set( 'offset', ( $grid_args['features_on_front'] + $grid_args['teasers_on_front'] ) + ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) * ( $page - 2 ) );
        }
    add_action('genesis_before_loop', 'gb3_loop_row_wrapper_open', 1);
    add_action('genesis_after_loop', 'gb3_loop_row_wrapper_close' , 999);
    }
}
add_action( 'pre_get_posts', 'bsg_grid_loop_query_args', 999 );

/* Add column classes */
function bsg_grid_loop_post_classes( $classes ) {
    global $wp_query;
    $grid_args = bsg_grid_loop_pagination();
    if( ! $grid_args || ! $wp_query->is_main_query() )
        return $classes;
    // First Page Classes
    if( ! $wp_query->query_vars['paged'] ) {
        // Features
        if( $wp_query->current_post < $grid_args['features_on_front'] ) {
            $classes[] = 'featured-thunbnail col-sm-12';
        // Teasers
        } else {
            $classes[] = 'col-sm-6 col-lg-4';
        }
    // Inner Pages
    } else {
        // Features
        if( $wp_query->current_post < $grid_args['features_inside'] ) {
            $classes[] = 'feature col-sm-12';
        // Teasers
        } else {
            $classes[] = 'col-sm-6 col-lg-4';
        }
    }
    return $classes;
}
add_filter( 'post_class', 'bsg_grid_loop_post_classes' );



/* Not Sure if this is needed */
function be_fix_posts_nav() {
    if( get_query_var( 'paged' ) )
        return;
    global $wp_query;
    $grid_args = bsg_grid_loop_pagination();
    if( ! $grid_args )
        return;
    $max = ceil ( ( $wp_query->found_posts - $grid_args['features_on_front'] - $grid_args['teasers_on_front'] ) / ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) ) + 1;
    $wp_query->max_num_pages = $max;
}
add_filter( 'genesis_after_endwhile', 'bsg_fix_posts_nav', 5 );


/* Grid Loop Inner Row Wrap */
function bsg_loop_row_wrapper_open() {
    ?>
    <div <?php echo genesis_attr( 'row' ); ?>>
    <?php
}
function bsg_loop_row_wrapper_close() {
    echo '</div>';
}

Flexbox Support to make columns equal height (no support below IE10):

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

[salcode]

@bryanwillis Wow, cool. Thanks for taking a first pass at this.

[bryanwillis]

The function bsg_loop_row_wrapper_close() in my example makes me cringe that it's only purpose is to echo a . That can't be the only way...

Maybe even putting anonymous functions directly in bsg_grid_loop_query_args() :

add_action('genesis_after_loop', function(){ 
    echo '</div>'; 
}, 999);

Not sure if that is any cleaner...

Also, here's a bootstrap example I made recently using flexbox layout (1st example) and masonry layout (3rd example).

http://codepen.io/bootstrapped/full/RrabNe/

Bootstrap 4 allow both of these things so we might as well plan for the future...