A simplistic CSS grid system built for responsive websites

Download Flex

View on GitHub

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