Genesis Flexible widgets - How Altitude pro sets up the home page widgets

front-page.php

<?php
/**
 * Altitude Pro.
 *
 * This file adds the front page to the Altitude Pro Theme.
 *
 * @package Altitude
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    http://my.studiopress.com/themes/altitude/
 */

add_action( 'genesis_meta', 'altitude_front_page_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 * @since 1.0.0
 */
function altitude_front_page_genesis_meta() {

	if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-5' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) ) {

		// Enqueue scripts.
		add_action( 'wp_enqueue_scripts', 'altitude_enqueue_altitude_script' );

		// Add front-page body class.
		add_filter( 'body_class', 'altitude_body_class' );

		// Force full width content layout.
		add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

		// Remove breadcrumbs.
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

		// Remove the default Genesis loop.
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		// Add homepage widgets.
		add_action( 'genesis_loop', 'altitude_front_page_widgets' );

		// Add featured-section body class.
		if ( is_active_sidebar( 'front-page-1' ) ) {

			// Add image-section-start body class.
			add_filter( 'body_class', 'altitude_featured_body_class' );

		}

	}

}

// Define front page scripts.
function altitude_enqueue_altitude_script() {
	wp_enqueue_script( 'altitude-script', get_stylesheet_directory_uri() . '/js/home.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

// Define front-page body class.
function altitude_body_class( $classes ) {

	$classes[] = 'front-page';

	return $classes;

}

// Define featured-section body class.
function altitude_featured_body_class( $classes ) {

	$classes[] = 'featured-section';

	return $classes;

}

// Add markup for front page widgets.
function altitude_front_page_widgets() {

	echo '<h2 class="screen-reader-text">' . __( 'Main Content', 'altitude-pro' ) . '</h2>';

	genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1" tabindex="-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2" tabindex="-1"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3" tabindex="-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-3' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4" tabindex="-1"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-4' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-5', array(
		'before' => '<div id="front-page-5" class="front-page-5" tabindex="-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-5' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-6', array(
		'before' => '<div id="front-page-6" class="front-page-6" tabindex="-1"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-6' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-7', array(
		'before' => '<div id="front-page-7" class="front-page-7" tabindex="-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-7' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

}

// Run the Genesis loop.
genesis();

functions.php

<?php

// Register widget areas.
genesis_register_sidebar( array(
	'id'          => 'front-page-1',
	'name'        => __( 'Front Page 1', 'altitude-pro' ),
	'description' => __( 'This is the front page 1 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-2',
	'name'        => __( 'Front Page 2', 'altitude-pro' ),
	'description' => __( 'This is the front page 2 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-3',
	'name'        => __( 'Front Page 3', 'altitude-pro' ),
	'description' => __( 'This is the front page 3 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-4',
	'name'        => __( 'Front Page 4', 'altitude-pro' ),
	'description' => __( 'This is the front page 4 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-5',
	'name'        => __( 'Front Page 5', 'altitude-pro' ),
	'description' => __( 'This is the front page 5 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-6',
	'name'        => __( 'Front Page 6', 'altitude-pro' ),
	'description' => __( 'This is the front page 6 section.', 'altitude-pro' ),
) );
genesis_register_sidebar( array(
	'id'          => 'front-page-7',
	'name'        => __( 'Front Page 7', 'altitude-pro' ),
	'description' => __( 'This is the front page 7 section.', 'altitude-pro' ),
) );

style.css

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

.flexible-widgets {
	padding-bottom: 60px;
	padding-top: 100px;
}

.flexible-widgets .widget {
	float: left;
	margin: 0 0 40px 2.564102564102564%;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-area .widget:nth-of-type(1),
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
	background: none;
	margin-left: 0;
	padding: 0;
	width: 100%;
}

.widget-area.flexible-widgets.widget-half .widget,
.flexible-widgets.widget-halves .widget {
	width: 48.717948717948715%;
}

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

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

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2) {
	clear: left;
	margin-left: 0;
}

What this looks like in action: