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; | |
} |
to get