When I was fourteen years old, before there was such a thing as the World Wide Web, Bob the Art Teacher gave me an assignment: create a design using only squares on a page. I wish I still had the design so I could show it to you now. On a sheet of paper no bigger than this magazine page, I drew at least thirty boxes of various sizes and dimensions. They weren't scattered per se, but there wasn't much rhythm to the page either. I got a bad mark on that assignment for not making the boxes line up. I tried to justify it by showing how some of the boxes did line up, if you drew imaginary lines through the middle of some of the in-between boxes, but it was a weak argument and I knew it. Yes, easy-going Bob, who liked to be called by his first name, busted my butt for not using a grid.

Why Use a Grid System?

Grid systems were originally based on the size of the printed page. They used artificial constraints to break up the page in a pleasing manner, putting content in the center, surrounded by a border that was related to the size of the page. Maths were involved and they helped designers answer commonly asked questions like, "How wide should this page element be so that the whole page looks balanced?" Designers were trained in the use of grids, with the height of grid-based design being in the 1980s, before the masses had access to desktop publishing programs on their desktop computers.

Except the Web isn't the printed page. (This may shock some of your clients, I know.) The browser window is fluid. It can be as small as 300 pixels on a mobile device and wider than 1200 pixels on a desktop. So why use a grid system at all? Using a grid as the base for your design puts good constraints on your page elements, helps you create a visual hierarchy, and guides viewers as they scan each page element in search of the piece of content they're looking for. Grids force us to think about the relationships between page elements and how they fit together. Grids can even help us reduce the screen size by either narrowing the grid (the flexible responsive grid), or adapting the number of columns visible in the viewport (a cheap retrofit that's easy to implement).

By using a CSS grid framework, you also allow a whole community of designers and developers to help you with cross-browser compatibility. In short: using a grid system allows you to create better designs with less effort.

How To Use Grids

By their very nature grids are rigid. In print, grids will have both a horizontal and a vertical rhythm. On the Web it is more difficult to predict font sizes used by each site visitor, and so we tend to see columns, and not rows. These columns provide us with an easy-t0-follow guide for placing content on our site with strict widths, but flexible heights. The next figure shows the three shapes you need to be aware of in a grid: columns, gutters and margins. Columns can only exist if there is space between them to show you the boundaries where one column ends and the next column starts. The space between each of the columns is referred to as the gutter. Around the entire design is an additional, calculated space which separates the edge of the content from the edge of the container (browser window). This outer space, referred to as the margin, is half the width of the gutter. This is because the margin exists both on the left and right side of the column. When two margins butt against one another they create a double-wide space—the gutter.

The grid system described in this article is the 960gs. It is used by many popular base themes including NineSixty, Fusion and Omega. These base themes come with their own Drupalized version of 960gs.

Go ahead and download the framework kit from the 960gs Website. It includes sketch sheets (yes, for drawing wireframes on paper), templates for your favorite graphics application, and the CSS files we'll be using in the remainder of this article.

Choosing Column: 12 or 16

The first step in designing a site with the 960gs is to choose whether you want your page divided into 12 columns or 16 columns. The total width of the page will not be affected by the number of columns used. These columns can be grouped together to create regions on your Web page. Choosing between a 12- or 16-column grid does not affect the total width of the page.

These regions can be filled by sidebars, content, advertisements, or whatever else your Website needs to display. To help decide which grid to use, look for known constraints. If there is no obvious choice, start with 12 columns—you can always change your mind later. Remember my Freshman year art project and use constraints to guide the eye around the page; too many columns in your design make it more difficult for visitors to orient themselves on your Web page.

Filling in Regions

In my experience, graphic designers find it a welcome relief to work within the constraints of a grid framework, and themes are faster to build when matching up a design to the code in an established CSS grid framework. If, however, you don't have the luxury of a graphic designer or themer on your team, you can still make use of grid frameworks to design your Web pages.

Using an appropriate template from the 960gs kit, add each of your page elements into the grid. Use as much detail as possible to give yourself a good sense of how crowded your pages will be. Organize the page elements to create visual hierarchy. Put the most important page element near the top left of the page (assuming a left-to-right language site). Group similar elements.

If your grid is too full you may need to shuffle your template so that you have room to make your pages beautiful instead of just jammed with content. And if your pages have every available pixel used up, ask yourself, "Does this design point visitors where to look first?" This was the lesson I missed twenty years ago in art class: don't just slap objects on a page. Carefully plan your page layouts by using a grid to guide your designs.

Using the 960 Grid Framework

To use the 960gs you need to know about the following HTML concepts:

• To create a square container of any size you need to use <div class="container-12"> OR <div class="container-16">. By default a container will use up 100% of the available width it is contained in; however, it will only be as tall as the content it contains.
• Inside your container you may have as many columns as you like. Each of these columns will probably use a <div> as well. There is no requirement to use a <div>. To adjust the width of a column inside of a container (usually a <div>), add a class with the number of grid columns you want to assign as the width. For example: <div class="grid-6">
• Each new container represents a new row in the layout and may have any combination of columns that you like. For example: content row has 2 columns; but the footer row has 4 columns.
• Containers may have multiple styles applied to them, separated by a space. For example: <div class="grid-6 clear-block">
• Containers may also have a unique identifier applied to them. This is especially useful if you need to apply unique styles to only that region on the page. For example: <div class="grid-6" id="sidebar-left">

With these simple rules, and a bit of magic, you can create a Web site template using the 960gs.

Building Wire Frames with 960gs and HTML

This is the most basic page Drupal will output; we'll use it as our template even though we'll be working in plain HTML for this article:

To this very simple template, add the CSS Grid Framework files by adding the following HTML snippet on a new line, directly below the title (inside the <head></head> tags):

Change the file name to match the location of your 960gs files on your computer. Once this is complete you are ready to start working with the grid system. The remainder of this section will show only the HTML that needs to appear between the two body tags.

Warning!

The 960gs uses an underscore ( _ ) instead of a dash ( - ). You will need to adjust your class assignments accordingly. The dash is used here because the NineSixty theme has changed the style names to match the Drupal coding standards guide. If you are working in the plain HTML version with the original 960gs CSS files, change all class names to use an underscore. If you are extending this article and creating a Drupal theme with NineSixty as your base theme, use the dash, as shown in this article.

Creating the Container

The 960gs comes in two flavors: 12 column and 16 column. To begin working with the grid system you must specify which of these two systems you want to use. This is done by creating a new container as follows:

Assuming the whole Web site will be contained in the same shape, you will only need to make this declaration once. If you want your container to include browser wall-to-wall coloring, you will need to use a wrapper which isn't constrained by a 960gs container. For example:

Adding Page Elements

Working from the top left corner of your design file, create a new HTML div for each box in your wireframe. To the