Sie sind auf Seite 1von 13

Tutorial Details

Program: 960 Grid System Topic: HTML / CSS Grids Difculty: Beginner to Intermediate Estimated Completion Time: One hour


Me gusta


Share Were already familiar with the 12- and 16-column variants of, but did you know that a 24-column alternative exists too? In this article, youll master the 960 grid system by dissecting the 24-column version demo. If youve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, youll be able to convert your designs to HTML and CSS in no time at all.

A 960 Grid System Masterthats what youll be after youve gone through this article. And, although were going to use the 24-column variant of 960gs, youll completely understand how the two older types (i.e., 12- and 16-columns) work too, by applying the same principles youll learn here. But rst, take a good look at the 24-column demo in the 960gs site, as its all well need in our leap towards mastery of this popular CSS framework.

A Look at the 24-Column Demo

We rst need to check the HTML code of the demo, so view its sourceif youre using Chrome, Firefox, or Opera, just press ctrl+U; if youre using Internet Explorer, change your browser! (on the Mac, use cmd+U for Firefox and opt+cmd+U for Safari and Opera; Chrome only does the right-click option). Keep the HTML source code window on your desktop, as were going to refer to it from time to time. Next, youll need to download the les (if you havent done so yet), and open the uncompressed CSS le 960_24_col.css. We must do this because the demos CSS is compressed, and will be difcult to inspect. (If youre the masochistic type, feel free to use the demos CSS instead. Thats pretty much all we need to prepare, aside from a semi-functioning brain. Now youll nd that the demo page holds the key to completely understanding the grid system, and well start by examining its three sections.

Inspecting the Framework: The Demos Three Sections

The three sections consist of the following:

1: Top Section
First, we have a top area that shows two columns for each row, where the left column grows wider as the right column gets narrower, until they are equal in size.

2: Middle Section
Next, we have a middle section that shows a 30px square progressively moving from left to right, while whitespace before and after it extends the row to take up the whole 960px width.

3: Bottom Section
Finally, theres a bottom section that shows two rows of rectangles with different sizes, which split the 960px width in two halves.

Believe it or not, understanding completely what the assigned classes behind these columns do is all youll ever need to get a rm grasp of 960 grid system. Isnt that great? Lets examine each section further.

Top section: grid_1 to grid_24 classes

Peeking at the source code of this section shows us that, rst, before any of the grid_xx classes were assigned, the class container_24 was given to the overall wrapping div: view plaincopy to clipboardprint? 1. <divclass="container_24"> 2. <h2> 3. 24ColumnGrid 4. </h2> 5. ... 6. </div> 7. <!--end.container_24--> The importance of this class cannot be overemphasizedit partly dictates the width of the columns where a grid_xx class is assigned. And as you might have guessed, it also divides the 960px width into 24 columns. (Similarly, putting container_12 or container_16 at the top will divide the width into 12 and 16 columns, respectively. The word divide is in quotes because it doesnt actually do that; youll see later how this process is achieved.) Moving on, youll notice that the top-most row has a single div with a class of grid_24. The remaining rows in the top section have two divs each: the left divs range from class grid_1 up to grid_12, and the right divs range from grid_23 down to grid_12; the sum of the two classes in each row is 24. view plaincopy to clipboardprint? 1. <divclass="grid_24"> 2. <p> 3. 950 4. </p> 5. </div> 6. <!--end.grid_24--> 7. 8. <divclass="clear"></div> 9. 10. <divclass="grid_1"> 11. <p> 12. 30 13. </p> 14. </div> 15. <!--end.grid_1--> 16. 17. <divclass="grid_23"> 18. <p> 19. 910 20. </p> 21. </div> 22. <!--end.grid_23--> 23. 24. <divclass="clear"></div> 25. 26. <divclass="grid_2"> 27. <p> 28. 70 29. </p> 30. </div> 31. <!--end.grid_2--> 32. 33. <!--...--> 34.

35. <divclass="grid_11"> 36. <p> 37. 430 38. </p> 39. </div> 40. <!--end.grid_11--> 41. 42. <divclass="grid_13"> 43. <p> 44. 510 45. </p> 46. </div> 47. <!--end.grid_13--> 48. 49. <divclass="clear"></div> 50. 51. <divclass="grid_12"> 52. <p> 53. 470 54. </p> 55. </div> 56. <!--end.grid_12--> 57. 58. <divclass="grid_12"> 59. <p> 60. 470 61. </p> 62. </div> 63. <!--end.grid_12--> 64. 65. <divclass="clear"></div> This is how the assigned grid_xx classes would look like if we tried to visualize each divs class name:

You might have noticed in the code that after the last div in a row, we have an empty div with a class of clear. Ignore it for now, well deal with it later. Next, lets take a look at what happens behind the scenes, i.e., in the CSS, when we assign the container_24 class: view plaincopy to clipboardprint? 1. .container_24{ 2. margin-left:auto; 3. margin-right:auto; 4. width:960px; 5. } As you can see, this class, which was assigned to the overall wrapping div of the document, centers our work area and gives it a 960px width. Easy enough. Next, here are the grid_xx classes, which were placed on the main divs of the top section: view plaincopy to clipboardprint? 1. .grid_1, 2. .grid_2, 3. .grid_3, 4. ... 5. .grid_23, 6. .grid_24{ 7. display:inline; 8. oat:left; 9. margin-left:5px; 10. margin-right:5px; 11. } We see that the grid_xx classes give the columns left and right margins of 5px each, which forms a 10px gutter when you place the columns side-by-side. This in turn is achieved by oating them all to the left. Also, they are given a display of inline, to prevent the Double Margin Float Bug from being triggered in our dearly-beloved browser. (Apparently, it is triggered when you oat an element that has margins assigned to it.)

Lastly, we have the descendant selectors formed by a combination of container_24 and grid_xx classes: view plaincopy to clipboardprint? 1. .container_24.grid_1{ 2. width:30px; 3. } 4. .container_24.grid_2{ 5. width:70px; 6. } 7. ... 8. ... 9. .container_24.grid_23{ 10. width:910px; 11. } 12. .container_24.grid_24{ 13. width:950px; 14. } As you can see, these CSS declarations are the ones that actually determine the width of the columns where a grid_xx class is assigned. This is how assigning container_24 at the top divides the width into 24 columns the pre-set width sizes are assigned according to which container_xx class a grid_xx class is combined with.

For comparison purposes, here is how its counterpart CSS declarations in the 16-column variant looks like: view plaincopy to clipboardprint? 1. .container_16.grid_1{ 2. width:40px; 3. } 4. 5. .container_16.grid_2{ 6. width:100px; 7. } 8. 9. .container_16.grid_3{ 10. width:160px; 11. }

If you compare the HTML source code of the demo for the 12- and 16-columns with the 24-column demo, youll notice that there is no difference in how the grid_xx classes were assigned. And now you know why this is soits not the grid_xx class that determines the width of the columns, but its combination with a container_xx class, as

shown in the CSS above. Another thing worth noting here is the actual size of each container when you assign a grid_xx class. Although its labeled 30, 70, 110, and so on in the demo, its actually 10px more because of the left and right margins on either side of the container.

As you can see, grid_1 has a width of 30px + 10px horizontal margins (total width: 40px) grid_2 has a width of grid_1 (40px) + 30px width + 10px margins (total width: 80px) grid_24 has a width of grid_23 (920px) + 30px width + 10px margins (total width: 960px) Seeing it this way satises the math we have for the width: that 24 40px-wide columns is equal to 960px (i.e., 40px * 24 = 960px). This view more accurately shows what the CSS actually does to the markup. Although the containers size is really just 30px, 70px, 110px, and so on (as it is labeled in the demo), it helps to know that the horizontal margins are the reason why the sum of the widths for each row do not equal to 960px. (It only amounts to 940px, except for the rst row, assigned a grid_24, which spans 950px. The lost 20px for all the other divs is accounted for by the leftmost and rightmost 5px margins, and the 10px gutter between the 2 columns for each row.) But heres the more practical thing to remember: As long as you use the 24-column psd template when you create your designs (or the 12- or 16-column psd templates, for that matter), you can just count the number of columns you want for a particular design element, use that number for your grid_xx class, and the column is set. For example, if your logo takes up four columns, then give its containing div a grid_4 class. Heres an example of how to use it:

Although the site (shown above) actually uses the 12-column variant, we could just as well overlay the 24-column pattern on it and it will still t the layout perfectly (because the 24-column version is, of course, just the 12-column version with columns divided by two). As you can see, knowing that we have a 960px width divided into 24 columns makes life easier, as we only need to line up our design elements along the edges of the columns, count the number of columns they occupy, set that as our grid_xx classs number, and were done. But what if you want a lot of empty spaces in your design? Or what if you want to center a small design element, and just have white spaces around it? Enter the prex_xx and sufx_xx classes.

Middle Section: prefix_xx and suffix_xx classes

If you check the markup for the middle section, what youll see are variations of this code: view plaincopy to clipboardprint? 1. <divclass="grid_1prex_xxsufx_xx"> 2. <p> 3. 30 4. </p> 5. </div> 6. where prex_xx + sufx_xx = 23. (That is, 0 + 23, 1 + 22, 2 + 21, 3 + 20, and so on..) Whats happening here?

First, youll notice that each row class assignments amount to 24 columns (grid_1 + combined values of prex_xx and sufx_xx classes, which is 23). Next, youll see that the prex_xx classes are in ascending order (from 1 to 23) while the sufx_xx classes are descending (from 23 to 1). Also, when prex_xx or sufx_xx has a value of 23, it doesnt have a counterpart sufx_xx or prex_xx class, because it no longer needs it (value is already 23). Lastly, each of these units is 30px-wide, and as weve seen in the grid_xx classes above, they also have 10px horizontal margins.

We already know that assigning an element a grid_1 class gives it a 30px width and 5px paddings on either side. But what does the prex_xx and sufx_xx classes do? As you may have already guessed, they give additional left (prex_xx) and right (sufx_xx) padding, increasing the size of a grid_xx class unit. Thus, prex_1, prex_2, and prex_3 will give your element left paddings of 40px, 80px, and 120px, respectively; while the same amount of paddings are given to its sufx_xx counterparts, but in the opposite side. view plaincopy to clipboardprint? 1. .container_24.prex_1{ 2. padding-left:40px; 3. } 4. .container_24.prex_2{ 5. padding-left:80px; 6. } 7. 8. ... 9. 10. .container_24.sufx_1{ 11. padding-right:40px; 12. } 13. 14. .container_24.sufx_2{ 15. padding-right:80px; 16. } For whitespace in your designs, just add the prex_xx and sufx_xx classes. They lock up your content to a certain width (determined by the grid_xx class you assign), while the space on either side in lled up with padding.

For a simple example, lets pretend again that the homepage is using the 24-column variant, and that the twitter-bird graphic is the logo of the site.

We can see that it occupies three columns, so we give it a grid_3 class. Lets also assume that there are no other elements along its row. We would therefore also give it a sufx_21 class (3 + 21 = 24), since the additional padding needs to span the whole width. Obviously, if there are other elements on that row, we need to adjust the sufx_xx class to create some space for another element that spans a few grid_xx classes (e.g. a search form). Also, depending on where your design elements are located relative to the left edge of the row, you might also need to add a prex_xx class. Always remember: the numbers used in the classes for each row (whether grid, prex, or sufx) should be equal to 24. Next, well perform a bit of magic, as the next set of classes allow your content to appear differently than what the markup predicts it would.

Bottom Section: pull_xx and push_xx Classes

For this section, if you're not using Firefox at the moment, I'd like to ask you to switch to it temporarily, as you'll understand the next concepts better with Chris Pederick's Web Developer Toolbar (WDT) extension for Firefox. (If you haven't installed it yet, now's the time to download and install it. I understand there's already a Google Chrome version of the WDT, but in my opinion, it's nowhere near its Firefox counterpart.) Once you're running Firefox with the WDT already installed, go back to the 24-column demo page, and scroll down to the very bottom. You'll see the two groups of boxes I showed you a while agodifferent-sized, yet tting together to form this last section of the demo. Now check out the HTML code for this section: view plaincopy to clipboardprint? 1. <divclass="grid_12push_12"> 2. <divclass="grid_6alpha"> 3. <p> 4. 230 5. </p> 6. </div> 7. <!--end.grid_6.alpha--> 8. 9. <divclass="grid_6omega"> 10. <p> 11. 230 12. </p> 13. </div> 14. <!> 15. 16. <divclass="clear"></div> 17. 18. <divclass="grid_1alpha"> 19. <p> 20. 30 21. </p> 22. </div> 23. <!--end.grid_1.alpha--> 24. 25. <divclass="grid_11omega"> 26. <p> 27. 430 28. </p> 29. </div> 30. <!> 31. 32. <divclass="clear"></div> 33. 34. </div> 35. <!--end.grid_12.push_12--> 36. 37. <divclass="grid_12pull_12"> 38. <divclass="grid_1alpha"> 39. <p> 40. 30 41. </p> 42. </div> 43. <!--end.grid_1.alpha--> 44. 45. <divclass="grid_11omega"> 46. <p>

47. 430 48. </p> 49. </div> 50. <!> 51. 52. <divclass="clear"></div> 53. 54. <divclass="grid_6alpha"> 55. <p> 56. 230 57. </p> 58. </div> 59. <!--end.grid_6.alpha--> 60. 61. <divclass="grid_6omega"> 62. <p> 63. 230 64. </p> 65. </div> 66. <!> 67. 68. <divclass="clear"></div> 69. 70. </div> 71. <!--end.grid_12.pull_12--> 72. 73. <divclass="clear"></div> Compare it again to what you see on the demo page. What's happening here? Shouldn't the rst group of boxes (230-230-30-430) be shown before the last group (30-430-230-230), as in the markup? Well, that's the power of the push_xx and pull_xx classes. But before we go into them, go to the WDT, click the Information button, and choose Display Div Order, just to make sure that you're correctly seeing how the CSS affects the markup.

Here's a screenshot of what you should see:

I needed to show this to demonstrate that the two groups are divided into left and right sides, and not top and bottom. That perception error is easy to make (as I did) because: (1) we're used to seeing div groups that stretch the whole 960px width; and (2) the two groups have similar-sized boxes that are easy to confuse with each other. (Nathan Smith, the 960gs creator, could have probably used boxes with different sizese.g. 70-390-190-270 and 230-230-30-430to achieve the same effect and would have avoided the potential confusion, but he didn't....) But now that you've seen how the rst group (as it appears in the markup) was pushed and how the second group was pulled by these classes, check out the CSS to see how they're doing it: view plaincopy to clipboardprint? 1. .push_1,.pull_1, 2. .push_2,.pull_2, 3. ... 4. .push_22,.pull_22, 5. .push_23,.pull_23{ 6. position:relative; 7. } 8. 9. ... 10.

11. .container_24.push_1{ 12. left:40px; 13. } 14. 15. .container_24.push_2{ 16. left:80px; 17. } 18. 19. ... 20. 21. .container_24.push_22{ 22. left:880px; 23. } 24. 25. .container_24.push_23{ 26. left:920px; 27. } 28. 29. ... 30. 31. .container_24.pull_1{ 32. left:-40px; 33. } 34. 35. .container_24.pull_2{ 36. left:-80px; 37. } 38. 39. ... 40. 41. .container_24.pull_22{ 42. left:-880px; 43. } 44. 45. .container_24.pull_23{ 46. left:-920px; 47. } 48. First, giving these two classes to HTML elements positions those elements relatively, so that we could move the divs to the left, right, top, or bottom relative to where it would normally occur in the document. (More on CSS positioning here.) Next, in combination with the container_24 class, the pull_xx classes give the div a negative left padding, which makes it possible to pull the div's content to the left. On the other hand, the push_xx classes, as expected, does the opposite and gives the div a (positive) left padding to push its content to the right (by giving way to the left padding).

But why the hassle? you might ask. Why not just put them in the correct order in the markup in the rst place, so you won't have to use these unnecessary classes? Good questions. The answer lies in the pursuit of having semantic and accessible markupour designs should not force the markup to a structure that doesn't make sense or isn't up to standards when the stylings are turned off. And CSS has been proven to handle such situations elegantlyit lets us achieve the look of our designs regardless of how the markup was written (well, largely). In the 960gs site, Nathan Smith shows the header as a good example of how he used these classes:

On the surface, we might think the markup will show the Twitter logo rst, then the Download link, and nally the 960 logo. But that wouldn't be semanticthe title of the site (i.e. 960 logo) should come in rst. And as you probably know, this arrangement also has SEO benets. So, the markup for the header actually goes something like: view plaincopy to clipboardprint? 1. <body> 2. <divclass="container_12"> 3. <h1class="grid_4push_4"> 4. 960GridSystem 5. </h1> 6. <!--end.grid_4.push_4--> 7. <pid="description"class="grid_4pull_4"> 8. <ahref="#">Download</a>-Templates:AcornFireworks,Flash,... 9. </p> 10. <!--end#description.grid_4.pull_4--> 11. As you can see, the logo does come in rst, and after it, the download link. (The markup for the Twitter logo is found after the footer, was given an id of twitter, and is absolutely-positioned. It wasn't given a class, so we won't concern ourselves with it.)

You also saw in the markup (as predicted) that the logo was pushed and the download link section pulled. To visualize it more clearly:

And that's how you use the push or pull classesknow that they either give your divs a negative or positive left padding, then pull or push your content according to the number of columns you need your content to be pulled or pushed. There's one last set of classes that are integral to 960.gsand they let you create complex layouts. A column that spans several rows, for example. Let's tackle them next.

alpha and omega Classes

If you've read tutorials or articles on before, you probably already know by now that the alpha and omega classes cancel the horizontal paddings set by grid_xx classes. And most likely you also know that their primary use lies when you have grid_xx classes inside nested divs. For the benet of those who don't know yet, let's go to our CSS and see what these classes do to the elements they are assigned to: view plaincopy to clipboardprint? 1. .alpha{ 2. margin-left:0; 3. } 4. 5. .omega{ 6. margin-right:0; 7. } 8. Pretty straightforwardthey simply zero out the left (alpha) and right (omega) margins. And as we've seen a while ago, when we assign an element a grid_xx class, we automatically give it horizontal margins of 5px on both sides. With nested divs, we don't want to double these margins, so we give an alpha or an omega class, or both, accordingly.

A nested div that's touching the left edge of its parent div would be given the alpha class. Similarly, the omega class is assigned to the nested div that's placed on the parent div's right edge. But what if we have a nested div that touches both edges of its parent div? That's right, we assign both classes to it. Let's move on to an example so that you can see how it's done. Though not shown in the demo, here's an instance of how a complex layout is achieved with the aid of the alpha and omega classes (and nested divs with grid_xx classes):

Here we have columns that span several rows on both sides, with rows and boxes in the middle. You can also visualize it as a typical 3-column layout; but for our example, we're just using 15 columns. Of course, you can easily expand it to 24 columns. The key to creating layouts like these in is to: 1. Remember that makes the layout possible by oating divs to the left. 2. Create your nested divs from those initial oated divs. This means you'll have oated divs within oated divs. Here's one way of approaching our layout: group them into three columns rst, and assign them the appropriate grid_xx classes:

Next, assign the additional grid_xx classes for the nested divs (note that we don't have any nested div for the right column):

Since we have at least two levels of grid_xx classes inside nested divs, we also need to add the alpha and omega classes appropriately:

The nested divs inside the left column touches both edges of its parent div, so we need to add both alpha and omega. The same holds true for the divs with grid_8 classes in the middle section. But each grid_4 div on top only has to have alpha or omega, since it only touches either the left or the right edge of its parent div. As you may have concluded from this simple example, you can nest divs with grid_xx classes as deep as you want (if your design demands it), as long you correctly mark them up, and give them the right classes, so that they are oated correctly and any excess margins are canceled. And speaking of oats, the last group of classes, though not unique to, make it all possiblethey clear the oats that are automatically created when you assign a grid_xx class.

Leveling the Field: The clear Classes

Earlier, we noticed this in the markupevery div that was given a grid_xx class, that was also the last div for its row, was followed by an empty div with a class of clear. view plaincopy to clipboardprint? 1. <divclass="grid_5"> 2. <p> 3. 190 4. </p> 5. </div> 6. <!--end.grid_5--> 7. 8. <divclass="grid_19">

9. <p> 10. 750 11. </p> 12. </div> 13. <!--end.grid_19--> 14. 15. <divclass="clear"></div> 16. 17. <divclass="grid_6"> 18. <p> 19. 230 20. </p> 21. </div> 22. <!--end.grid_6--> 23. 24. <divclass="grid_18"> 25. <p> 26. 710 27. </p> 28. </div> 29. <!--end.grid_18--> 30. 31. <divclass="clear"></div> 32. The no-brainer reason for this is that we need to clear oated divs, because once we oat them, they no longer take up space, causing the elements below it to be pulled up, which ultimately leads to a broken layout. As we've seen in the demo, a solution for this potential problem is to place an extra non-semantic div with a class of clear, which does the following: view plaincopy to clipboardprint? 1. .clear{ 2. clear:both; 3. display:block; 4. overow:hidden; 5. visibility:hidden; 6. width:0; 7. height:0; 8. } 9. The code above is basically Nathan Smith's own solution to the problem, as discussed in his blog. A lot of web designers don't have any issues with it, except probably for standardistas who might cringe at the thought of using extra non-semantic divs in the markup for a styling problem. Thankfully, Nathan Smith also included the clearx solution in the CSS, rst discussed on It does away with the extra div, as you can place it alongside the grid_xx classes and achieve the same effect: view plaincopy to clipboardprint? 1. <divclass="grid_5"> 2. <p> 3. 190 4. </p> 5. </div> 6. <!--end.grid_5--> 7. 8. <divclass="grid_19clearx"> 9. <p> 10. 750 11. </p> 12. </div> 13. <!--end.grid_19--> 14. 15. <divclass="grid_6"> 16. <p> 17. 230 18. </p> 19. </div> 20. <!--end.grid_6--> 21. 22. <divclass="grid_18clearx"> 23. <p> 24. 710 25. </p> 26. </div> 27. <!--end.grid_18--> 28. That's the same example markup above with the extra divs removed, and the clearx class added. It will do the same thing, so you can choose this method of clearing if you nd it to your liking. Here's the CSS for it: view plaincopy to clipboardprint? 1. .clearx:after{ 2. clear:both; 3. content:''; 4. display:block; 5. font-size:0; 6. line-height:0; 7. visibility:hidden; 8. width:0; 9. height:0; 10. } 11. /* 12. Thefollowingzoom:1ruleisspecicallyforIE6+IE7. 13. MovetoseparatestylesheetifinvalidCSSisaproblem. 14. */

15. 16. *html.clearx, 17. *:rst-child+html.clearx{ 18. zoom:1; 19. } 20. The code might be a bit different from what you're used to. This is because Nathan Smith based it on a blog entry by Jeff Star, which supposedly updates the original clearx hack, to do away with code intended for a browser that's now extinct (i.e. IE for macs), and tweaks it for newer ones (i.e. IE6 and IE7).

Using just the 24-column demo of (and in some instances, the site itself), I've shown you how each of its classes work and how you could use them in converting your 960-based designs into HTML and CSS. Every section in the demo imparts lessons to be learned, and once you see what the classes do to your markup by examining the CSS, the mystery of vanishes, and you gain a better understanding of what happens behind the scenes. You might even nd new ways of using the classes, since you now know what they do. Applying your newfound knowledge becomes easy, because once you've set your columns using, you'll just have to assign id's to the divs (as the situation warrants) as hooks to further adjust the divs' paddings or the sizes of its text inside.