Why FlexGRID?

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

The idea came about when there’re no other option to find a responsive grid system use that worked like FlexGRID. With full-width row backgrounds, equal column heights and cross-browser compatibility .

Examples of FlexGRID

    •  Simple Page building

It’s easy to start using FlexGRID, just Download the source  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. FlexGRID FlexGRID – a Flexible, Pure CSS, Responsive Grid System with equal height columns.

 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.

.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,

.col11, .col12

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.

 Source : FlexGRID
Love this post?