The Fluid Grid system

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

Web developers have only recently started to show a real interest in grid systems. Why it has taken so many years for web developers to become interested in something that has been essential to the written medium in general since the 30s, is hard to say.

Why this grid system?

The Fluid Grid System is great for rapid prototyping as well as final production layouts because designers can quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm. Download (28 KB) the latest version of the Fluid Grid System, the .zip contains all the XHTML/CSS files you need to get started designing.

Open Source and Free

In the spirit of giving back and contributing to the design industry the Fluid Grid System is open source and is released under the GPL and MIT licenses. We encourage users to adapt and improve the system, so go branch the latest from the master at Github →

The Code

The code for the Fluid Grid System is simple, lightweight, and non-obtrusive. The following is a sample of an empty three column layout with columns of varying width.

<div class="six_column section">
  <div class="two column">
    <div class="column_content">
      ...
    </div>
  </div>                        
  <div class="three column">      
    <div class="column_content">
      ...
    </div>
  </div>                        
  <div class="one column">      
    <div class="column_content">
      ...
    </div>
  </div>
</div>

How to use the Fluid Grid System

To the left is an example of how the code works. Because The Fluid Grid System is based on a six column grid the only necessary provision is that all of the <div class="three column"> within it’s parent <div class="section"> element add up to 6. A total of 720 different combinations can be achieved in this fashion.

Credit and Inspiration

Many of the ideas that have inspired me to build the Fluid Grid System is from some long-time geniuses of the web world including Nathan Smith for the original web grid system the 960 grid system, also Andy Clarke, Jon Hicks, Shaun Inman, Cameron Moll, Jason Santa Maria, David Heinemeier Hansson, Sam Ruby, John Resig, Mark Bolton, Khoi Vinh, John Maeda, and Ryan Sims to name only a few.

Flexible

Off the shelf the Fluid Grid System looks great, it leaves a simple page that makes no assumptions of your design besides that if should maintain a grid based layout. By default all the elements land on the baseline also.

Accessible

Because of the simple layout and simple use of CSS, the Fluid Grid System degrades well in both older web browsers, scales with text nicely, and presents contented to screen readers in a logical manner as well.

Upcoming

In the near future you will see layouts for both Wordpress and Moveable Type blog platforms as well as integration with JQuery and JQuery UI for use in rich internet applications (RIA's) and more.