Cacher is the code snippet organizer for pro developers

Reference:

https://my.studiopress.com/documentation/wellness-pro-theme/front-page-setup/front-page-and-flexible-layout-configurations/

Related:

https://sridharkatakam.com/video-how-flexible-widgets-in-altitude-pro-work/

/**
 * 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 home-featured widget area.
genesis_register_widget_area(
    array(
        'id'          => 'home-featured',
        'name'        => __( 'Home Featured', 'my-theme-text-domain' ),
        'description' => __( 'This is the home featured section.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'sk_home_featured' );
/**
 * Display Home Featured widget area below header.
 */
function sk_home_featured() {
    // if we are not on the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

    genesis_widget_area( 'home-featured', array(
        'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'home-featured' ) . '"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

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

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

.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;
    }

}

Certain Genesis child themes from StudioPress like Wellness Pro have the Flexible Widgets feature wherein the widgets placed in widget areas automatically get arranged in different layouts on the frontend depending on the number of widgets in the widget area.

In this article, I share generic code (taken from Wellness Pro) for flexible layout widgets that can be used in any Genesis child theme.