Flexgrid

Flexgrid is a responsive 12 column grid, with sizing classes available for elements spanning 1 through 12 columns, so you can easily mix and match column sizes. If you don't need all 12 columns, helper classes are included to center and/or reverse your columns.

Flexgrid Usage

---

1. Include the CSS file flexgrid-min.css from the source/ folder into your project folder, and link to that file in the head of your file:
<link rel="stylesheet" type="text/css" href="css/flexgrid-min.css" />.

2. Simply create a wrapper element with a .fg-row class. Place your column elements inside and give each a class of .fg-{breakpoint}-{column-width}, where {breakpoint} is the size at which the grid will collapse to full-width (see Breakpoint Sizes below) and {column-width} is the number of horizontal columns that the element will occupy.

For example, if you want to create a three-column row that will stack vertically at the medium breakpoint size:

<div class="fg-row">
    <div class="fg-md-4">
        <h3>I'm first</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="fg-md-4">
        <h3>I'm second</h3>
        <p>And I have more content then the first and third grids. All grid boxes match height of the largest. Duis aute irure dolor in reprehenderit.</p>
    </div>
    <div class="fg-md-4">
        <h3>I'm third</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
    </div>
</div>

Which will look like:

Flexgrid Breakpoint Sizes

---

Flexgrid is Bootstrap Compatible

Flexgrid is designed to work with Bootstrap. No conflicts here. Use it in place of the default Bootstrap grid for better control over your content.

Flexgrid Basics

More Responsive Examples

Centering and Reversing

---