How to add Reasons grid similar to the one on StudioPress.com. http://sridharkatakam.com/add-reasons-grid-similar-one-studiopress-com/

front-page1.php

wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );

wp_enqueue_script( 'modernizr-flexbox', get_stylesheet_directory_uri() . '/js/modernizr-flexbox.js', '', '1.0.0', true );

front-page2.php

genesis_widget_area( 'front-page-4', array(
	'before' => '<div id="front-page-4" class="front-page-4"><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>',
) );

front-page3.php

?>
	<div id="front-page-4" class="front-page-4">
		<div class="reasons">
			<div class="wrap">

				<div class="grid">

					<div class="grid-box title">
						<a class="grid-box-content features-link" href="#">
							<h2 class="medium-title">8 Reasons to Choose the Genesis Framework</h2>
							<span class="small-title">Find Out More</span>
						</a>
					</div>

					<div class="grid-box reason-1">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-search" aria-hidden="true"></i>
							<h3>Search Engine Optimization</h3>
							<p>State-of-the-art code and smart design architecture mean search engines see your content.</p>
						</a>
					</div>

					<div class="grid-box reason-2">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-mobile" aria-hidden="true"></i>
							<h3>Responsive HTML5 Designs</h3>
							<p>Genesis offers an array of beautiful themes for your content that are HTML-compatible and mobile-responsive.</p>
						</a>
					</div>

					<div class="grid-box reason-3">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-hdd-o" aria-hidden="true"></i>
							<h3>Unlimited Everything</h3>
							<p>Unlimited support. Unlimited updates. Unlimited websites. One low price entitles you to support, updates, and domains.</p>
						</a>
					</div>

					<div class="grid-box reason-4">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-lock" aria-hidden="true"></i>
							<h3>Airtight Security</h3>
							<p>Features don’t mean a thing if your site’s not secure. Choose Genesis, which adheres to WP security best practices, and it will be.</p>
						</a>
					</div>

					<div class="grid-box reason-5">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-cloud-download" aria-hidden="true"></i>
							<h3>Instant Updates</h3>
							<p>In a snap, update the code that runs in the background all while keeping the look and feel of your site just the way you want it.</p>
						</a>
					</div>

					<div class="grid-box reason-6">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-tachometer" aria-hidden="true"></i>
							<h3>Customizable and Fast</h3>
							<p>Genesis makes customizing your site easy, but without bloated code that slows down your site.</p>
						</a>
					</div>

					<div class="grid-box reason-7">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-wpforms" aria-hidden="true"></i>
							<h3>Widgets &amp; Layout Options</h3>
							<p>We developed custom widgets you can use on any area of your site, and you can even choose to mix-and-match your layout.</p>
						</a>
					</div>

					<div class="grid-box reason-8">
						<a class="grid-box-content features-link" href="#">
							<i class="fa fa-code" aria-hidden="true"></i>
							<h3>Developers You Can Trust</h3>
							<p>If you want a custom design, we have a list of talented, reliable designers who will knock one out of the park for you.</p>
						</a>
					</div>

				</div><!-- end .table -->

			</div>
		</div>
	</div>

	<?php

front-page4.php

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' ) ) {

front-page5.php

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

style.css

/* ## Grid
--------------------------------------------- */

.reasons {
	padding: 100px 0;
	background-color: #f3f3f3;
}

.grid {
	overflow: hidden;
	width: 100%;
}

.grid-box {
	background-color: #fff;
	border: 1px solid #eee;
	border-width: 0 1px 1px 0;
	color: #fff;
	float: left;
	margin: 0;
	vertical-align: top;
	width: 33.333333333333%;
}

.grid-box:nth-of-type(3n+1) {
	clear: both;
}

.grid-box-content {
	display: block;
	min-height: 260px;
	overflow: hidden;
	padding: 50px;
	width: 100%;
}

.grid-box a {
	color: #0066cc;
	border-bottom: 1px dotted #0066cc;
	text-decoration: none;
}

.grid-box a:focus,
.grid-box a:hover {
	color: #222;
	border-bottom-color: #222;
}

.grid-box a.features-link {
	color: #3a3a3a;
	border: none;
}

.grid-box a.features-link:focus,
.grid-box a.features-link:hover {
	background-color: #3a3a3a;
	color: #fff;
}

.reasons .grid-box.title {
	background-color: #e0922f;
}

.reasons .grid-box.title,
.reasons .grid-box.title a {
	color: #fff;
}

.reasons h3 {
	font-size: 18px;
	font-weight: 600;
}

.reasons .medium-title {
	font-size: 36px;
	font-weight: 100;
	letter-spacing: -.03em;
	margin-bottom: 20px;
}

span.small-title {
	display: block;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .16em;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.grid .fa {
	display: block;
	margin-bottom: 20px;
	font-size: 30px;
}

/* Grid - Flexbox Supported
--------------------------------------------- */

.flexbox .grid {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow: visible;
}

.flexbox .grid .grid-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	height: auto;
}

.flexbox .grid-box:nth-of-type(3n+1) {
	clear: none;
}

.flexbox .grid-box-content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack:justify;
	-webkit-justify-content:flex-start;
	-ms-flex-pack:justify;
	justify-content:flex-start;
	min-height: 0 !important;
	padding: 50px; /* Add pixel value for FF bug on rendering percentage as 0 */
}

.flexbox .grid-box-item.bottom p:last-of-type {
	margin-bottom: 0;
}

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

	.grid .grid-box {
		width: 50%;
	}

	.grid .grid-box:nth-of-type(3n+1) {
		clear: none;
	}

	.grid .grid-box:nth-of-type(even) {
		clear: both;
	}

	.reasons .grid-box.title {
		width: 100%;
	}

	.grid-box.title .grid-box-content {
		min-height: 0;
	}

}

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

	.grid .grid-box {
		border-width: 0 0 1px;
		width: 100%;
	}

}