Genesis Front Page with Flexible Widgets

front-page.php

<?php // DON'T REMOVE this

add_action( 'genesis_after_header', 'sg_front_page' );
/**
 * Display Home Featured widget area below header.
 */
function sg_front_page() {

    // Display front-page widget areas.
    for ( $i = 1; $i <= 5; $i++ ) {
        genesis_widget_area( "front-page-{$i}", array(
            'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'front-page-' . $i . '' ) . '"><div class="wrap">',
            'after'  => '</div></div>',
        ) );
    }

}

/** 
 * remove post loop from the homepage
 */
remove_action( 'genesis_loop', 'genesis_do_loop' );

//* Run the Genesis loop
genesis();

functions.php

<?php // don't copy this

/** credits: https://sridharkatakam.com/

/**
 * Setup widget counts.
 *
 * @param string $id The widget area ID.
 * @return int Number of widgets in the widget area.
 */
function custom_count_widgets( $id ) {
    global $sidebars_widgets;

    if ( isset( $sidebars_widgets[ $id ] ) ) {
        return count( $sidebars_widgets[ $id ] );
    }
}

/**
 * Set the widget class for flexible widgets.
 *
 * @param string $id The widget area ID.
 * @return Name of column class.
 */
function custom_widget_area_class( $id ) {
    $count = custom_count_widgets( $id );

    $class = '';

    if ( 1 === $count ) {
        $class .= ' widget-full';
    } elseif ( 0 === $count % 3 ) {
        $class .= ' widget-thirds';
    } elseif ( 0 === $count % 4 ) {
        $class .= ' widget-fourths';
    } elseif ( 1 === $count % 2 ) {
        $class .= ' widget-halves uneven';
    } else {
        $class .= ' widget-halves';
    }

    return $class;
}

// Register front-page widget areas
for ( $i = 1; $i <= 4; $i++ ) {
	genesis_register_widget_area(
		array(
			'id'          => "front-page-{$i}",
			'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
			'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
		)
	);
}

style.css

/* credits: https://sridharkatakam.com/ */

/* Flexible Widgets
--------------------------------------------- */

.flexible-widgets .wrap {
    max-width: 1280px;
    padding: 80px 0 40px;
    overflow: hidden;
}

.flexible-widgets.widget-area .widget {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
    float: none;
    width: 100%;
}

.flexible-widgets.widget-fourths .widget {
    width: 25%;
}

.flexible-widgets.widget-halves .widget {
    width: 50%;
}

.flexible-widgets.widget-thirds .widget {
    width: 33.33%;
}

.flexible-widgets.widget-halves .widget:nth-child(odd),
.flexible-widgets.widget-thirds .widget:nth-child(3n+1),
.flexible-widgets.widget-fourths .widget:nth-child(4n+1) {
    clear: left;
}

@media only screen and (max-width: 1340px) {

    .flexible-widgets .wrap {
        max-width: 1220px;
    }

}

@media only screen and (max-width: 1200px) {

    .flexible-widgets .wrap {
        max-width: 1040px;
    }

}

@media only screen and (max-width: 1023px) {

    .flexible-widgets.widget-fourths .widget,
    .flexible-widgets.widget-halves .widget,
    .flexible-widgets.widget-thirds .widget {
        float: none;
        width: 100%;
    }

    .flexible-widgets .widget {
        padding-left: 0;
        padding-right: 0;
    }

}