Flexbox Grid in Genesis

Flexbox Grid is a grid system based on the flex display property.

Here’s how it can be loaded and used in Genesis:

Step 1

Upload flexboxgrid.min.css to child theme’s css directory (create if not existing).

Step 2

Add the following in child theme’s functions.php:

// Load Flexbox Grid
add_action( 'wp_enqueue_scripts', 'sk_enqueue_flexbox_grid' );
function sk_enqueue_flexbox_grid() {

	wp_enqueue_style( 'flexboxgrid', CHILD_URL . '/css/flexboxgrid.min.css' );

}

Step 3

Add the needed markup to display your desired content in a grid by following the examples on Flexbox Grid’s site.

Ex.:

<div class="flexbox-grid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-11">
<div class="box-row"></div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-6 col-md-8 col-lg-10">
<div class="box-row"></div>
</div>
<div class="col-xs-2 col-sm-6 col-md-4 col-lg-2">
<div class="box-row"></div>
</div>
</div>
</div>

Needless to say, if you are placing HTML similar to the above in WP Post/Page editor, it goes in Text view and not in Visual.

Step 4

Add the following in child theme’s style.css and modify to suit:

.flexbox-grid {
	margin-top: 40px;
}

.box-row {
	padding: 20px;
	margin-bottom: 20px;
	background-color: #007fff;
	border-radius: 2px;
}

.flexbox-grid p {
	margin-bottom: 0;
}