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.