how to use a grid system in css

The 960 Grid System has been around for a while now… but it’s been mostly used on the coding side of projects as an HTML/CSS framework. Today, we’re going to discuss the advantages of using grid systems like 960GS at the very start of a project, before you even open up Photoshop or Fireworks. If you haven’t used a framework before, or you just want a good refresher, this is a great place to start!

** A Bit of Context: ** Our sister site, Nettuts has posted a bunch of great articles about using CSS frameworks as a coding tool. They’re all relevant to this discussion, so go check them out when you get a chance. This article, however, will look at the advantages of using a framework for Web Designers specifically. We won’t dig too deep into the coding, instead, we’re going to discuss how using a framework can be a powerful tool in the design phase, before the coding even begins. Alright, let’s dive in!

Diving Into Frameworks

Chances are good that you’ve already heard of or used some sort of CSS framework already… but just in case, let’s review the key benefits of using a CSS framework (aka grid system) in any web project:

• Provides a “framework” that’s designed to look good on all monitors.
• Streamlines the design process by defining exact measurements.
• Reduces development time by providing pre-coded HTML/CSS.
• In a perfect world, it helps designers and developers communicate better – smoothing out the process of moving from Design to Coding. Ultimately, a CSS framework should help establish some basic guidelines for content columns, while still providing designers with full control over their designs.

** In this article: ** I’m going to explain what a CSS framework is, and why I chose 960. Then, I’ll go over the basics of how to apply the 960 Grid. To wrap up our discussion, I’ll show you a few sites that are using the 960 grid, and how they are structured.

CSS Frameworks: A Brief Overview

A CSS Framework is a series of stylesheets created to make a web developer’s life easier. They account for the various quirks of browsers, are easily adaptable, and apply basic design principles (such as establishing visually pleasing margins between elements).

Oftentimes, these frameworks also have typography stylesheets, which can act as a great place to begin working on your site’s typography (for more information about Typography, check out this article).

There are two major CSS Frameworks at the moment: Blueprint and 960. Both are perfectly capable frameworks, with great features and ease of use. It simply comes down to a matter of preference of which Framework you feel most comfortable using.

Before you begin the design phase of a project, it’s important to discuss the selection of a framework with the person who is going to code the site. Often, developers will have preferences towards a particular CSS framework, and as one of the main reasons we use frameworks during the design phase is to smooth out the transition from design to coding, it’s a major decision. If you’re coding the project yourself, just make sure you are comfortable with the grid framework you pick – there’s nothing worse than design an entire site based on a framework that you end up disliking.

Designing With the 960 Templates

Once you’ve come to a basic agreement on the sketched out concept for the site, it’s time to crack open the template files. This is probably the central reason why I like using the 960 system… it comes pre-packaged with templates for just about any program you can think of. I happen to use Photoshop, so here’s a screenshot of the provided template:

The key benefit here is simple: The template has pre-built guides for all of the main content columns that directly correspond to the CSS framework on the coding side of things. It’s easy to quickly draw your main content columns and keep everything in your design clean and organized.

** Quick Tip: ** Reference your own stylesheet after you reference the Framework, so that you can adjust specific aspects of the framework without altering the Framework itself (and if you make a mistake, you don’t have to re-download and overwrite the Framework’s files). With these 4 files, you’re now ready to begin to design your site.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

001 <div class="container_12">
002     <div class="grid_7 prefix_1">
003        <div class="grid_2 alpha">
004            ...
005        </div>
006        <div class="grid_3">
007            ...
008        </div>
009        <div class="grid_2 omega">
010            ...
011        </div>
012     </div>
013     <div class="grid_3 suffix_1">
014       ...
015     </div>
016 </div>

The first div is your container, what your content will be stored in. By defining it’s class as “container_12″, you’re saying: “I want this container to have a 12 column grid” (The same practice applies when using a 16 and 24 column grid).

Now that you’ve defined the container as a 12 column layout, you begin to structure your site in such a way that it fits within the layout. If you look at the next div elements in the hierarchy (as noted by the tabs), you’ll see the syntax for their definitions. “Grid7″ and “grid3″ are easy enough to understand: you’re saying that this div element is going to take up X number of columns. However, 7+3 = 10 < 12, which means you’ll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of “gridx suffixy”, you’re saying: “I want this div to take up X columns, and for there to be Y number of empty columns after it.” (This also applies to prefix). So, since “Grid7″ has a prefix of 1, and “Grid3″ has a suffix of 1, 7+3+1+1 = 12!

By now, I know you’re wondering about the Div elements nested in the “Grid7″ div. Well, you can nestle divs which take up a specified number of columns inside another div, so long as it does not exceed the size of its parent grid. Furthermore, the first and last elements must have “alpha” and “omega” appended to their class definition, respectively. So, in our sample code: “grid2 alpha” is the first div nested within “grid7″, the next element “grid3″ is in the middle (and therefore does not need an “alpha” or “omega” appended to it), and finally “grid2 omega” is the last div nested within “grid_7″. And since 2+3+2 = 7, the definition is proper.