Flex Grid System

What is it?

The Flex Grid System is a css grid system designed specifically for responsive (flexing) sites. It's semantic, easy to use and customize, and very flexible (get it?).

Why use it?

Increased productivity, powerful features. Rapid prototyping, uniform margins, easy page layout, layout variations in CMSs... the list goes on. In fact, grids can be used in pretty much any site. Trust me, they'll make your life easier. In fact, this page is using Flex Grids right now!

How to use it

Check out our Quick-Start Guide for a primer, or dive into the documentation for a much fuller look. Have questions or suggestions? Head on over the the GitHub repository and drop me a line.

Features

Responsive and Standard Grids
Parent-Based Sizing
Percentage-Based
Highly (and Easily) Customizable
Can be Infinitely Nested
Able to Remove Gutter on a Grid-by-Grid Basis
Cross-Browser Friendly
Semantic

Example


    <div class="grid">
        <div class="sm-twelve md-three columns">Element 1</div>
        <div class="sm-twelve md-three md-offset-by-three columns">Element 2</div>
        <div class="sm-twelve md-three columns">Element 3</div>
    </div>

Renders

Element 1

Element 2

Element 3