Responsive Web Design Made Simple

GridFlair is a CSS framework that can be used to rapidly develop responsive websites that adjust intelligently on any web-enabled device.

Why Use GridFlair?

  • Make your website not only ready for viewing on the desktop or laptop but also for smartphones, tablets, and other portable web devices that may be released in the future. You'll love it!
  • Create only one markup file. No need for separate web design code for each type of device.
  • It's FREE.
responsive web design using GridFlair

Tutorial

Demo

Download Version 3.0

HTML Markup Is Dead Simple

Simply create a GridFlair block. Specify the number of grids then specify the breakpoint.

Basic Two Columns

<div class="gridflair">
     <div class="set6grid break_at_320">Column One</div>
     <div class="set6grid break_at_320">Column Two</div>
</div>

Three Columns Setup

<div class="gridflair">
     <div class="set6grid break_at_1000">Column One</div>
     <div class="set3grid break_at_1000">Column Two</div>
     <div class="set3grid break_at_1000">Column Three</div>
</div>

Nested GridFlair Blocks

<div class="gridflair">
     <div class="set6grid break_at_320">Column One</div>
     <div class="set6grid break_at_320">
          <!-- GridFlair block inside another GridFlair block -->
          <div class="gridflair">
               <div class="set6grid break_at_580">Column One</div>
               <div class="set6grid break_at_580">Column Two</div>
          </div>
     </div>
</div>