Create a grid loop with Genesis Framework, Flexbox, and Sass (Scss).

_grid-loop.scss

/**
 * This code is strictly for layout and does not do any sort of
 * beautification or extra styling. Each theme is different,
 * so you'll need to do that on your own.
 *
 * If you'd rather use css, you can use a free tool like
 * SassMeister to compile this code. (https://www.sassmeister.com/)
 */

// Easy Media Queries
@mixin media( $size ) {
    @media only screen and ( min-width: $size ) {
        @content;
    }
}

// Define Variables
$breakpoint-m: 960px;
$sidebar-width: 300px;

/**
 * We're keeping .content-sidebar-wrap, .sidebar-primary, and
 * .content declarations separate from the .do-the-flex class
 * so that the styling is used on all pages, and not just the
 * archive and blog-style pages
 */

// Set up the parent element for .content and .primary-sidebar
.content-sidebar-wrap {
    @include media( $breakpoint-m ) {
        display: flex;
    }
}

// Give primary sidebar a fixed width for
// easier and more predictable content
// management, such as with ads and calendars.
.sidebar-primary {
    @include media( $breakpoint-m ) {
        // 1st value = 0 = don't grow (flex-grow)
        // 2nd value = 0 = don't shrink (flex-shrink)
        // 3rd value = $var = start at $sidebar-width (flex-basis)
        flex: 0 0 $sidebar-width;
    }
}

// Setting a parent element to 'display: flex;'
// will affect all of its children, so we have 
// to reset the 'display' property to it's original
// state, which is 'initial.'
// _Not_ doing this will force the articles inside of
// .content to also space themselves vertically to
// match the height of the sidebar, which can get
// obnoxious really quick. Kind of like this long-ass
// comment that just doesn't end.
.content {
    @include media( $breakpoint-m ) {
        display: initial;
        // Note: there's no need to give .content a width
        // because flexbox will automatically size it to fit
        // what's left of the flex-container.
    }
}


// Flex time, baby! Let's use our new body class.
.do-the-flex {
        
    // Here's where our new div comes in handy
    // This div is the flex container for the
    // articles grid
    .extra-content-wrap {
        @include media( $breakpoint-m ) {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
    }

    // Change article and page descriptions to be
    // full width, and not part of the grid (so-to-speak).
    // Same with the pagination.
    .archive-description,
    .archive-pagination,
    .pagination,
    .posts-page-description {
        @include media( $breakpoint-m ) {
            // Three values: flex-grow | flex-shrink | flex-basis
            flex: 0 0 100%;
        }
    }

    // Display the articles in a grid.
    // Decrease the percentage to show more
    // articles per row. ~32% is good for 3.
    .entry {
        @include media( $breakpoint-m ) {
            flex: 0 0 48%;
        }
    }
}

functions.php

<?php
// Do not copy the beginning php tag. Add the following code to your functions.php file.

/**
 * This setup will:
 * 1) Make the content and primary sidebar display using flexbox
 * 2) Set up the articles to display as a 2x grid
 *
 * is_archive() = category pages
 * is_home()    = main blog page
 */

/**
 * First, create a custom body class on the archive and main blog page
 * for more targeted styling.
 */
add_filter( 'body_class', 'cm_genesis_body_class' );
function cm_genesis_body_class( $classes ) {
    if ( is_archive() || is_home() )
        $classes[] = 'do-the-flex';
        return $classes;
}

/**
 * We'll need to add an extra div around the loop to avoid vertical
 * spacing issues later. There are two ways of doing this, choose one.
 * 
 * 1) Using genesis_markup()
 * 2) Echoing the div
 */

/* Option 1: Using genesis_markup() */

// Create a new div around the loop.
add_action( 'genesis_before_loop', 'c4u_genesis_extra_content_wrap_start', 5 );
function c4u_genesis_extra_content_wrap_start() {
    if ( is_archive() || is_home() ) {
        genesis_markup(
            array(
                'open'    => '<div %s>',
                'context' => 'extra-content-wrap'
            )
        );
    }
}

// End the new div around the loop
add_action( 'genesis_after_loop', 'c4u_genesis_extra_content_wrap_end', 95 );
function c4u_genesis_extra_content_wrap_end() {
    if ( is_archive() || is_home() ) {
        genesis_markup(
            array(
                'open'    => '</div>',
                'context' => 'extra-content-wrap'
            )
        );
    }
}

/* Option 2: Echoing the div */

// Create a new div around the loop.
add_action( 'genesis_before_loop', 'cm_genesis_extra_content_wrap_start', 5 );
function cm_genesis_extra_content_wrap_start() {
    if ( is_archive() || is_home() ) {
        echo '<div class="extra-content-wrap">';
    }
}

// End the new div around the loop
add_action( 'genesis_after_loop', 'cm_genesis_extra_content_wrap_end', 95 );
function cm_genesis_extra_content_wrap_end() {
    if ( is_archive() || is_home() ) {
        echo '</div>';
    }
}