Introducing FlexGRID

A clean, responsive grid system with equal height columns by VolumeThemes

Why FlexGRID?

FlexGRID is a mobile-first, responsive grid system, baked with equal column height goodness.

The idea came about when I couldn't find a responsive grid system I could use that worked like FlexGRID. With full-width row backgrounds, equal column heights and cross-browser compatibility in mind, I set to work.

Why is a responsive grid system with equal column heights such a big deal for me? I'm against using hacks to make things work, and that includes using hacks in grid systems to make columns look the same height. Instead I developed FlexGRID.

FlexGRID is built for Chrome, Firefox, Safari and IE10+

Need to support older versions of IE? Don't worry, FlexGRID contains graceful fallbacks right down to IE8.

Examples of FlexGRID

Simple Page Building
It's easy to start using FlexGRID, just download the source by clicking the link above and start building pages in minutes.
Fully Responsive Design
Make it happen anywhere, anytime.

FlexGRID is a mobile-up build, ensuring a smooth experience for mobile users, right up to desktop.
Equal Column Heights
Don't resort to fixed heights, jQuery or other CSS hacks to make columns look equal.

Just use FlexGRID - a Flexible, Pure CSS, Responsive Grid System with equal height columns. This row is a live example!

"A clean, responsive grid system with equal column heights."

12 Column Layout

If you can count to 12, you can use FlexGRID. Mix and match different combinations of column widths in each row, it's that simple.

Fluid Widths

By using fluid columns, FlexGRID fits any width page. Margins (gutters) are fluid and remain consistent too.

Fully Responsive

FlexGRID looks great all the way down to mobile, and knows when it's best to switch to a full column width layout.

Beautifully Coded

HTML and CSS is kept to a minimum, just checkout the markup further down.

This is FlexGRID

Mix and match the number of columns to suit your website layout. As long as they add up to 12, they'll work perfectly.

.col_11
.col_1
.col_10
.col_2
.col_9
.col_3
.col_8
.col_4
.col_7
.col_5
.col_6
.col_6
.col_5
.col_7
.col_4
.col_8
.col_3
.col_9
.col_2
.col_10
.col_1
.col_11
.col_12

The Markup

3 Column Markup Example

<div class="wrapper">
    <div class="row">
        <div class="col_4">
        	Column 1 of 3.
        </div>
        <div class="col_4">
            Column 2 of 3.
        </div>
        <div class="col_4 last">
            Column 3 of 3.
        </div>
    </div>
</div>
                    

.wrapper
Use the wrapper class when you want to add a full width background. Whether it's flat colour, an image, or video background, wrap your row in this.

.row
Contains all of your columns, and creates FlexGRID's equal column height goodness.

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12
These are your columns. Add these within your row and ensure they add up to 12. Add your content within these and style accordingly.

.last
Add this to the last column in every row, it removes unnecessary margins.

.no_padding
Want a row background colour but no column background? Just add the no_padding class to the rows inside the wrapper.

Want to talk web with us?

Whether you're starting a new business, revamping your current business, or just need some friendly advice, we want to hear from you.

*Name:
*Email Address:
*Budget:
*Message
Send Message