Grids have an established history in print design. Grid systems were developed as a flexible system able to help designers achieve coherency in organizing the page.

Chances are that you used a grid when created your mockup. That is one way to use a grid system in developing your layout. For those students who stare at a blank screen, arbitrarily placing elements, a grid would help facilitate the design process, and some of you need that.

What is a Grid?

A grid, or grid system, serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (though the grid in web based grid systems can be brought up easily enough) and are used by designers to determine the proper width and height of the content so that everything aligns.

A layout’s coherence is its unity, and unity in design is when all the elements are in dynamic agreement. Static agreement is better than something arbitrary or chaotic, but the ideal layout has an active plastic dimension. This dynamic plasticity should aid the communication.

The design itself should make the content compelling, visually organizing the communication in a systematically constructed rhythmically determined experience. The cadence of that rhythm should extend beyond the boundaries of the page to the work as a whole, so that the entire experience of the web site resonates with the same rhythmic clarity.

History of Grids on the Web

Two people that did much to put the grids on the web are Khoi Vinh who designed the New York Times online presence, and Mark Boulton, whose articles on the use of grids inspired BluePrint, 960, and others.

Blueprint came first and was quite popular. Created by Olav Frihagen Bjørkøy who became inspired by the Frameworks for Designers article on A List Apart. The 960 Grid System followed to capitalize on the way that number divides the pixels evenly in so many ways.

Navigating the Pixel Grid

The window is a grid of pixels that the designer has to navigate. Think pixels! You cannot divide pixels. Unless you work in numbers that can be evenly divided, you become stuck with a lot of odd numbers. It is a lot easier to work in multiples of some even number than to calculate a odd numbers together. Make your life easy and follow the grid!

Students are often perplexed the first few weeks of the class, before they learn to think in pixels. If the web page is 960 pixels wide, you can divide by 3, 4, 5, 6, 8, 10, 12, 15, and 16 — making it an ideal width for grids because you can divide it up into so many columns and mix and match the different grids at the same time. Add gutters, and it is possible to create even more divisions. To make this a visual process, use Gridulator. It will provide you with all the options for any number of grid and gutter combinations.

Which Grid System to Use?

Blueprint was the first CSS grid system and was the most popular in the beginning, but the 960 Grid System followed soon after, and it is currently the most popular Grid System, being adopted by a number of Content Management Systems. But the 960 Grid System is not immune from critique, and in the 978 Grid System, Nick La added 18 more pixels of white space to make type look better, while still fitting in the pixel dimensions of most all standard displays out there. It’s got a great demo that’s adapts to responsive web design, covering 300, 748, 978, 1218 and 1378px spread ready for use out of the box.

In the week on media queries, the template will introduce another grid system called Less Framework that uses a simplified frameless grid through all of the dimensions of 480, 600, 768, 992 and 1382px. Make sure you check out the demo’s and change the window size to see media queries at work.

There are a lot of resources changing all the time, so check out the Grid System website for updated articles, tools, books, templates and examples.