Flexgrid
Dead Simple, Bootstrap Compatible Responsive 12 Column Grid System built with Flexbox

A dead-simple, bare bones responsive grid to help you get your layouts looking sharp quickly. It only cares about laying out your content, so you can style your websites and applications however you like, without having to worry about creating a custom grid system.


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:

I'm first

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

I'm second

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.

I'm third

Sed ut perspiciatis unde omnis iste natus error sit.

Flexgrid Breakpoint Sizes

xs = 540px
sm = 768px
md = 992px
lg = 1200px

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

fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-1
fg-sm-2
fg-sm-2
fg-sm-2
fg-sm-2
fg-sm-2
fg-sm-2
fg-sm-3
fg-sm-3
fg-sm-3
fg-sm-3
fg-sm-4
fg-sm-4
fg-sm-4
fg-sm-2
fg-sm-5
fg-sm-5
fg-sm-6
fg-sm-6
fg-sm-12

More Responsive Examples

fg-md-3
fg-md-9
fg-lg-2
fg-lg-5
fg-lg-5

Centering and Reversing

One
Two
One
Two
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve

2016 by Jennifer Perrin (aka Luminary on Code Canyon) · Flexgrid License