Grid Systems On The Web

When I get a sense of “wow” regarding web design, some of my first observations tend to focus on the use of typography, simplicity, clear and sometimes bold appearance and the sense that everything seems to fall into place. Along with the understanding of a set of design principles more and more web designers have turned to the typographic grid and its series of vertical and horizontal axes to structure content. The typographic grid or grid system can be thought of as a guide to bring all elements of page layout together to create order and help designers achieve coherence in their workflow.

Good design is subjective and two people may have completely different opinions from one another about a particular work. Grid design is sometimes thought to look corporate or boxy in nature as opposed to a more organic appearance. But these impressions are not always the fault of the system.

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
Josef Müller-Brockmann

These differences in style are explained in great detail in the documentary Helvetica. The film is a helpful introduction to the typographic grid and a historical reference on the topic of typography in marketing and print through the last four decades. It has also sparked a personal fascination with grids and what is currently available on the web. I have found a large collection of articles, presentations, tools and CSS frameworks all devoted to modern grid systems. Here are some of my favorites:

The Grid System.org

The Grid System web site started in December of last year is a large resource and forum for everything grid systems. Its transparent presentation shows the user just how grids are used to clearly structure and organize its content.

CSS Grid System Frameworks

Yahoo! has included a CSS grid foundation in its useful Yahoo! UI library as a tool to help developers streamline workflow and provide a method for fast prototyping of websites. The Yahoo! Grid CSS foundation also takes into account design constraints such as overall width and areas for common ad sizes so users must first choose a template based on predefined dimensions, and orientation of columns.

There is also a simpler and more specific framework called the 960 Grid System. The 960 Grid System website contains a showcase of nicely designed grid-based sites where visitors can turn on column overlays to see how the designer incorporated the grid system into their designs.

To get a glimpse of where grid design is headed on the web, Alistapart.com recently posted an article called Fluid Grids.