Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.
That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help inexperienced readers decide. This one is different. This article covers the entire prototyping process. Imagine you are given a design and you need a mock up for the client. This article explains the basics of Grid 960, planning the grid for a design, and coding the prototype. The sample design will exploit most capabilities of Grid 960 giving you a firm knowledge base to work on. After you've seen the design below, its time to learn about how Grid 960 works.
Making the Grid
Grid 960 works by using classes through inheritance. Grid 960 provides two grids: 12 and 16 columns. The main container is always 960px wide. Using 960 allows the most combinations of column while being easy to work with. We will use the 12 column grid to code this design, but we will not use all 12 columns. Every grid cell has a margin: 0 10px. This creates a gutter of 20px. When creating a row, the total width of all elements add up to 960. Take a look at Grid 960's demo page. You will see a nice grid with all sorts of combinations. Each grid cell has a class that specifies what width it will be. Here is the break down of column widths for a 12 column grid.
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
Each width corresponds to a class name formed like this: grid_X where X is a number from the above list. If you want a block with width 940 use class grid_12. How does Grid 960 know what width it is supposed to be? Each grid_x is a selector container_Y .grid_X where Y is either 12 or 16 for columns. Lets dive into some code. Here's how to create a two row grid in a 12 column container. Let the first row be 940px, and the second row contain two equal columns.
<div class="container_12"> <div class="grid_12"><p>940px</p></div> <div class="clear"></div> <div class="grid_6"><p>460px</p></div> <div class="grid_6"><p>460px</p></div> <div class="clear"></div> </div>
When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns you're using. This ensures the correct width. Two grid_6 div's add up to 12. You are no limited to the same numbers. You could also use 6, 4, and 2. There you have it, a quick grid ready for content. Now that you know how Grid 960 works, lets see how to create the mockup.
The Mock Up
Visualizing the design's grid is easy. There is one row for the header image, a row for the nav bar, a row with 2 columns for the headline story and poster, a spacer, 4 columns, a spacer, than a footer with 3 columns. Click on the image for the code.
After checking out the visual, you should understand how to create the mockup's grid. Using the widths, match up the class #'s from the list and lets throw some code together. Remember to add the clearing div at the end of each row. Don't forget to include the stylsheets included in the Grid 960 package.
<div class="container_12"> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"> </div> <div class="grid_7"></div> <div class="grid_5"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>
The skeleton is ready. Time to start overlaying the design. The green bars are just divs with a background color and height. The navbar does not have a set height. Instead, it will be controlled by the size of the links inside. Don't forget to add the header image as well.
div.spacer {
background-color: #8FC73E;
height: 1em;
}
div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}
Apply the class to correct grid_12 divs and set the ID.
<div class="container_12"> <div class="grid_12"><a href="images/header.png" alt=""/></div> <div class="clear"></div> <div class="grid_12" id="navbar"></div> <div class="clear"> </div> <div class="grid_7"></div> <div class="grid_5"></div> <div class="clear"></div> <div class="grid_12 spacer"></div> <div class="clear"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="clear"></div> <div class="grid_12 spacer"></div> <div class="clear"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>
The middle columns don't require any effects. Add some place holder text to fill out the design. You can make some here. Before tackling the top section, move to the footer. In the screenshot, the footer is a solid color. You cannot accomplish this with the current code. A wrapper div around the bottom three columns solves the problem. So you think, no big deal, just insert a div. That breaks the grid since Grid 960 relies on parents and children to apply the styles (remember the selector container_12 .grid_4?) A subgrid solves the problem. Grid 960 allows nested grids. Create a subgrid by adding a grid_12 div, then place the grid_4's inside it. When using nested grids the children elements require special classes. The first child needs a class "alpha" and the last child a class &qout;omega" Edit the markup to reflect the changes and apply stylistic changes to the footer.
<div class="grid_12" id="footer"> <div class="grid_4 alpha"></div> <div class="grid_4"></div> <div class="grid_4 omega"></div> </div>
div#footer {
background-color: #e5e5e6;
}
Excellent! Now the footer has a solid background color and you can adjust the sizes of the columns if needed. Add some dummy text to the footer columns for right now and lets move to navbar. The navbar is a simple unordered list. Add some links and proper styling.
<div class="grid_12" id="navbar"></div> <ul> <li>Articles</li> <li>Topics</li> <li>About</li> <li>Editors</li> <li>Contact</li> </ul> </div>
div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}
div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}
Sweet. The page is really coming together. All that's left is creating the block effects on the top section. This is more sinister than it appears. Before we diving in, you need to realize some things about Grid 960 and CSS frameworks in general.
CSS Frameworks Do Not Solve All Your Problems
Astute readers may have realized something. The page is extremely rigid. Everything has a defined size and changing the size creates problems or potentially breaks the design. Designers also sacrifice some of our design goals because what Grid 960 allows. For example, the sample design was 1000px wide. Grid 960 only creates grids 960px wide, so the extra size is lost. What if you want to make your page 1000px instead of 960? In short, you can't without doing some heavy modification to the code. The framework locks designers into a set of constraints. Say the client wants a design that is wider or thinner. The designer will most likely have to scrap the code they've written to accomplish the new goals. There is another problem that hasn't been revealed yet--equal height columns. Since the middle columns all share the same background, they appear to be equal heights. In the footer a wrapper div puts a background behind the 3 columns. Grid 960 does not give you equal height columns. There is of course a way you can accomplish this on your own. Since we are prototyping a design, don't spend time worrying about the finer details on how the design will function when in production. You are only trying to convey the ideas at this stage. There is also another aspect of Grid 960 to take into account before tackling the top section. Grid 960 relies on sized elements and margins to create a correctly sized row. If you apply padding or borders, the design breaks. If you do, you have to adjust the size of the div to reflect the changes. Be weary of this. Adjust the sizes of elements in two places will always lead to confusion and make the design harder to maintain. That being said. Lets finish the top section.
The Top Section
Luckily you can maneuver around equal height columns in the top section. Since the image on the right as a set height and width, we know the other column's size. Create the block effect by adding a new div with a border inside the existing divs. Don't forget to set the heights. Don't set padding on the divs because that will change the width of block and break the grid. Instead specify a margin on a child element. This will not change the width of the block. Apply a margin to an inline element. This creates the desired effect and the text wraps to fit.
<div class="grid_7 topSection"> <div> </div> </div> <div class="grid_5 topSection"> </div>Use a class instead of ID because the topSection class is applied to two divs. This also allows us to change the heights easier. Choose a height (this number is really up to you) and create a class.
div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}
div.topSection div p {
margin: 10px;
}
Cool! Lets check out the progress.
Ready to fill the two boxes? Go ahead and fill the left one some with some sample text. Don't make to much or it will overflow the box. This creates a potential problem in the final design. How do you know how much text is too much? For the production design, the designer would need to create a function to only allow X amount of words to stop the over flow. Time to get the poster image ready. Before inserting an image determine the dimensions. If you are good a math and understanding the box model, you most likely already know how big it should be. If you don't, fire up FireBug and take a peak into the DOM. Click on Inspect. Get down to the div in question and click on it. Open the Layout tab. FireBug will display a helpful box model reference. Check out the image for help. Click on the image for fullsize.
The screenshot shows the poster div is 360x280. Find an image and create a style. I decided to let the image fill the entire div (unlike in the sample design.) If you wanted to create a 10px margin make sure to reduce the dimensions by 20px on each side.
img#poster {
width: 360px;
height: 280px;
}
You should get this. The mockup is complete. Feel free to throw in some real text and change the image around.
Know Thy Limits
Now that the prototype is finished,to take stock what has been done. You've manage to quickly prototype a design. Grid 960 easily created the grid for us. Where do to go from here? Naturally we would show the client and see what they think. There are a few caveats though. Have you tested this design in IE6 or IE7? No. Should we? No. This is a prototype. This is what it would look like in production. It is natural that any browser quirks would be worked out before production. What if the clients wants to create a more complex design? In this case, you will quickly start to see the limits of the framework. What if the design needs to be liquid or elastic? The framework will no do that. You would need to start from scratch. Remember that CSS Frameworks do not solve all your problems, but they do help with some. Grid 960 as well as others are great for throwing together prototypes. You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Mohamed Jama December 1st
nice post!
( )Ibrahim Abid December 1st
Great job thanks
( )Gelay December 1st
First
( )in the name of many people August 12th
Can’t people just stop commenting like this, gets annoying…
( )drako September 26th
his not even the first…
Will McNeilly December 1st
Nice Article, will use this in my next project. Cheers
( )Francisco Costa December 1st
Funtastic job… It will save lots of times
( )Scott December 1st
interesting read, 960 grid looks a lot more lightweight compared to blueprint.
I’d like to take this opportunity to point out that there’s nothing more ridiculous than someone posting a pointless “first” comment when they’re not actually first. *golf clap for Gelay*
( )Morten Brunbjerg Bech December 1st
Also, CSS frameworks generally don’t add much meaning to each element in the front end code.
Consider the following:
<div class="grid_12"><a href="images/header.png" alt=""/></div>
… compared to:
<div id="header"><a href="images/header.png" alt=""/></div>
The former doesn’t give you any clues to what the element actually contains, whereas the latter clearly identifies the content of the element.
( )Gavin April 5th
Can you not just rename the class? so change grid_12 to header in both the html and the css? is this possible?
( )Moises Urrutia April 9th
That is why you can have both a class and a ID. Then you can use a framework and still know what it is. It saves you time and lets you customize each Div.
( )Elliot May 20th
Create a uniquely named class that doesn’t do anything in your CSS (.empty{}), or just use an ID
( )Keith Ratliff August 4th
I prefer to just add more than one CSS class to the same element.
Thus:
Handles both cases.
( )James December 1st
Thanks for the tutorial Adam.
To be honest though, I really cannot see the benefit of using a CSS framework, it just doesn’t seem worth it to me. I don’t think CSS is sufficiently complicated or involved to deserve any frameworks.
( )Daniel December 1st
great article, although I think its it a bit harsh to criticise it for not being able to scale to 1000px, especially when it’s name is ‘960 grid system”
If you didn’t want a 960px wide page, why use something with 960 in the name?
( )Shane December 1st
Isn’t this tutorial very similar to this one?
I agree with James about the benefits of CSS frameworks. Although I understand their place, I don’t like selectors such as grid_5 and grid_12. They’re not particularly semantic. That’s just me
( )Tom December 1st
This ridiculous fad of posting “first!” really winds me up. To do it second is somehow even more pathetic. How about a plugin to filter such comments, that’d be a good tutorial!
( )Amt December 1st
nice tut, but i’m using blueprint framework and i see its the better for me now!!
( )John December 1st
I started using this grid framework in my design layout and it seems to help with content layout. As far as the CSS though, I still do all of that on my own.
( )Vladimir December 1st
@James: The benefit of using CSS Grid Framework is when you have big site with complex grid structure. And the structure changes frequently you don’t want to write CSS for every page. Than you build CSS structure(Framework) who will handle all the pages.If you have small web site with simple grid write your own CSS or use something simple like Malo
( )I should probably write tutorial on this subject. There are so much misconception about using or not CSS Framework.
Dan December 1st
^ I feel like CSS only gets so complex. If you’re working on a big site, you should try to keep the varying pages as similarly designed as possible anyway. Look at the tuts sites, for instance. Four distinct tut sites, and they’re all designed the same.
I feel like it’s more hassle than it’s worth to go in and change all the class and id names in both files to make it semantic. Might as well just take the half hour and start from scratch.
( )Dan December 1st
First!
Seriously I agree with Tom, million dollar tut right there.
( )Daniel December 1st
@James: You’re correct in saying that grid_5 and grid_12 as class names aren’t very semantic, but there’s no reason why you can’t specify an id for those divs like “header” or “blog-excerpts” or whatever a suitable id name related to the content would be.
@Adam (author): you’re use of is unnecessary – part of the beauty of using the 960 grid system is that all of the rows (should) add up to 12 (or 16, depending on the division you’re using), meaning there shouldn’t be any hanging divs that would need to be cleared. If you have content, the next div will automatically go to the next line because of the float.
( )Daniel December 1st
Sorry looks like my use of HTML got removed from my last post… Adam, What I’m referring to is the use of the “clear” class.
( )Dan Harper December 1st
Frameworks are very good for building complicated, heavy grid-based sites (like a newspaper’s site) quickly.
Personally, I have used 960gs & Blueprint both in production sites and find them great for rapid development. (I prefer 960gs over Blueprint, however).
It definitely isn’t best practice since you’re using non-semantic tag names, but for what it is, it’s fantastic.
( )xQlusive December 1st
Grids are always very usefull for many things .. Thanx for this extra info about Grids.
( )Alex December 1st
Good little overview on grids. I’m a big believer in designing to a grid. I really think it helps maintain a clean look on a website with a large amount of content.
I’m with Dan and Tom. But until the filtering tut comes along, check this out…
( )http://stupidfilter.org/main/
Aaron Irizarry December 1st
Great read thanks… more grids please!
( )insic December 1st
960 is really nice css framework. and nive tutorial too.
( )Adam Hawkins December 1st
Hey guys! Thanks for the comments on my article.
From James: “To be honest though, I really cannot see the benefit of using a CSS framework, it just doesn’t seem worth it to me. I don’t think CSS is sufficiently complicated or involved to deserve any frameworks.”
I agree to an extent. IMO, they have very limited uses.
From Dan Harper: “great article, although I think its it a bit harsh to criticise it for not being able to scale to 1000px, especially when it’s name is ‘960 grid system”
If you didn’t want a 960px wide page, why use something with 960 in the name?”
I was trying to get the point across that it is very structured. If you want to move out of bounds, then you need to change your design strategy.
( )moon December 1st
I have a programmer’s background (C, C++, Java, C# now thank God) and had never delved into CSS properly. Frankly, for some stupid reason, I run into a roadblock when working with CSS. I plan on following this tutorial tonight and I can clearly see how it would help a beginner/intermediate like me. Great tut.
( )Daniel Apt December 1st
I’m not familiar with the blueprint framework, so I’ll just stick to the 960 Grid System Framework.
Well, it works great for fixed width layouts. And a great plus point is that the framework has been tested on several browsers, so the design won’t look all messed up in a different browser *IE cough cough*.
( )John Sanders December 1st
Thanks for the helpful tutorial.
( )M December 1st
I use the 960 GS for all my projects now. It’s really simple to design a website that’s based off a grid, and its super easy to transfer that to the web, because you can see things start to layout really easily.
Great work.
( )Jarryd December 1st
I can see how CSS frameworks would come in handy for large grid-structured web sites like newspapers and large corporate structures. But otherwise I don’t think I would find a practical use for it.
Maybe I’m just prejudice from using the YUI Grid CSS combos and not really getting them to work for me.
I could definitely see how this could be handy in many situations, but I think I’ll stick to custom built for now.
( )Steve December 1st
i don’t like how 960 uses all these extra clearing divs… “”
i prefer the way blueprint’s css framework does it.
( )Moises Urrutia April 9th
You can always hide the overflow of the element in your CSS. Then you will not need to clear it after every row.
( )Mike rice December 1st
Although I find The Grid 960 CSS Framework very useful, the amount of classes and divs that are used at the same time utterly confuse me.
( )Patareco December 1st
It’s very important to master CSS, but this particular framework exposed and explained as you did, helped me realize it can save tons of work for these types of layouts with fixed columns.
( )Thank you for this post!
Gregg Moore December 2nd
I have been developing websites for over 10 years now and have flirted with several “CSS Frameworks” (not really a framework, but that’s another article). I consider myself someone who is very knowledgeable when it comes to CSS. I can testify that if you pick one CSS Framework, study it and learn it, you can save yourself hours of throwing a web page or site up. This is extremely important especially when when you average 2-3 sites a week.
And if you have a team of developers, it is very easy for all of us to jump from site to site in each other footsteps to maintain sites.
If you only develop a few sites or so a year, CSS Frameworks will not benefit you all that much.
( )toto December 2nd
the whole computer world is just a huge mess because of the so many times happening “I’ll dot it better than you”.
( )so here is a “is better than” blueprint. but it has nothing to do with it…
well, one more.
madmax November 10th
i dont see what you mean, there is always more than one way to do anything in the computer world. it has nothing to do with “better” its just preference
( )Max December 3rd
Mike over @ Capsize Designs combined the best of various CSS frameworks into to one called BlueTrip. I haven’t tried it just yet, but it did get some good feedback.
I’m all for anything that will speed up my development.
( )Ryan December 3rd
@DanHarper: I agree, I just started using 960.gs in my designs a few weeks ago (both prototypes and production) and am loving it. Sure, the classes aren’t really semantic, but that doesn’t stop you from adding your own (e.g. class=”grid_6 maincontent” and don’t forget about id=”").
Another benefit is that it helps you to work within constraints that will make a site easier to manage in the long run, especially if you are working with a team.
@Steve: have no fear, those clearing divs are completely unnecessary. I’m not sure why he put them in there.
( )Patrick December 4th
The best thing about 960 is it’s grid system, which helps a designer to quickly and easily visualize the page layout. Other than that, I have a big problem with using all of the non-semantic divs, where an ul would be more descriptive.
It seems to me that these CSS frameworks actually undermine the prototyping process because they prevent the designer from writing proper (X)HTML from the get-go.
I don’t see a problem with using 960 as visual aid; in fact, I think it’s one of the best grids out there. But after that initial stage, I ditch 960 and write code based on meaning.
( )Nouman Saleem December 5th
Blueprint, from my experience, is far more open in terms of layout and provides a much large selection of sizing.
( )Bryan P. December 5th
I tend to not understand the purpose the the new “grid” system. In my mind its sending us back to using tables. Maybe I dont fully grasp the beauty of the grid system.
They just seem like more work and hassle then it should be.
( )Danny M. December 9th
Thanks for introducing me to the 960 Grid. It’s saving me a lot of time in developing a simple website for a client at the moment.
To comment on Bryan P.’s comment: “I tend to not understand the purpose the the new “grid” system.”
The grid system is really not new at all. It’s been around for years in print design, usually referred to as the baseline grid, for managing the flow of text.
From a pure coder’s perspective, I’m sure it makes no sense. However, it’s nice to finally see the grid coming in to more and more CSS discussions on the web, considering that most design-savvy but not-so-techie designers/artists almost always use tables to lay out stuff on their web pages. Google some artist and visit his website, and then check out the code. It’s all just a bunch of table cells. Silly designers, tables are for data!
( )b_electro December 10th
You’re not a (graphic) designer if you don’t know how to use the grid system. Check out the book, “Making and Breaking the Grid: A Graphic Design Layout Workshop,” by Timothy Samara.
It’s nice that there’s some overlap between the designer’s layout and the developer’s framework, but really no matter what the technology is or will be going forward, the typographical grid system will be underneath it all, visually holding everything together.
( )kevin7 December 10th
Cool! But way to complicated to use…
( )madmax November 10th
its really not once you understand how the classes are to be used in your divs,
I saw how easy this was the first time i saw it because i had to figure out how to evenly lay out a grid of photos to use with light box and i saw a common pattern in my css, i stumble across this and realize its already written as a system.
( )Jonas December 12th
The point you making about that you have to start over if the client what the layout to be fluid – well you probably get the same problem with your own html and css files too. Even if you build a web site from scratch you will end up with building your own framework for that web site.
( )Martin December 12th
@Morten Brunbjerg Bech: i think its better for prototyping …
or only adding some semantic classnames beside the grid_3 and so on
( )if you had coded the final layout you are able to change the class names
Phil D December 13th
Thanks,
this is starting to get my brain into gear to
understand grid frameworks better –
Once I learn
these rules then I figure
I can creatively
break them (intentionally).
I found a link to a hybrid version
( )of “blueprint & 960″ floating
around amongst some search results.
I’ll probably stick to 960 until I’ve nailed it
before moving on just yet
kamal December 14th
Hi
( )Thanks very nice info
dwgeeks.com
Shawn Stringfield December 18th
I found this site that is ripping your posts off. Its pulling the exact content from this post and using it as it’s own article:
http://bangpound.org/node/4105
( )Philip Osborne December 22nd
I found a site with all these grid_x classes in the CSS and didn’t know what it was all about … I figured it was some sort of grid system but had never seen it before. You’ve answered a lot of questions here, definitely something I think I’ll be making use of.
I agree with those comments that say it can be as semantic as you want it … ok, so the classes aren’t very semantic but just add an id to each div and you’re sorted.
I’m also agreeing with the comments about designers use of layouts. From a developmental point of view I understand the need to separate content from layout and can see why the use of table layouts should be stopped, the html should be purely for content not layout and tables used purely for representing data. However, from a designers point of view I understand the importance of some kind of structured grid system and I’m pleased to see that a way has been found to incorporate this into CSS, maintaining the separation between content and layout but providing us designers with the grid system we find so useful!
( )Digital Space December 28th
The final screenshot image has this program looks similar to dreamweaver but looks more pro than dreamweaver, can anyone tell me what program it is i want to get one.
I urgently want to know what editor that is.
Width regards the grid tut, i dont think it is any use to most designers here, unless as said over and over again that you are working on a newspaper or magazine or portals of any kind for quick visual idea of how things might come out.
I do not think it is a good idea to get people to use stuff like this, ok it makes life easier for sure, but then people forget about how to code css down the line, so i would say just start from scratch and work your way up so that further down the line when you come across with problems with your layout than you know where the problem is.
“Buying a car is not a big deal, but building one is.”
( )internq7 October 23rd
it’s using Firebug add-on for Firefox
( )Andre December 29th
Nothing beats scratch code, but at some point a designer/developer must pull together a toolbox to get a quality job done swiftly. People that question the efficacy of a framework should remember shortcuts, filters, effects, macros, scripts, snippets, generators, Ruby on Rails, jQuery, etc… Personally, I’m building my own framework for a horizontal aand vertical rhythm using relative units (with scalable image divs). I’d hate to make something like that only to reinvent it for each new project.
( )Mike January 4th
@Digital Space
The last screen shot was of Firefox with Firebug.. its not for editing.
If you want a good clean editor go with TextMate http://macromates.com/ or Emacs
( )madmax November 10th
try coda
( )lawrence farrell January 6th
Terrific! You rock!
( )simon January 9th
A grid system in css need not have anything to do with the baseline grid, blueprint has tried to cover this , by snapping text to a baseline all text and image elements line up – so if the baseline is 18pt all images need to be a multiple of that figure.
A grid system need not be tied up with the baseline its just the layout, its nothing to do with the type – don’t restrict the type to a baseline set it free.
( )jbcarey January 11th
Just like every other webdeveloper I’ve tried the grid systems, 960.gs, Bluetrip…. and Usually I only tend to enjoy one thing I get from them and that is their Typograhical side of their frameworks….
As such I’ve been working on creating a “default template” that I’ve been using for my own site, as well as client site (very handy i’ve you average 2-3 sites a week)…
What does it for me is that I now “know” that my design works crossbrowser, whereas before I was forced to continually test in a wide array of browsers. If you get to know your own code, and tweak it constantly, it becomes a very powerful tool….
On a different level it even helps you really stick to a company simply because you are playing by your rules and you are forcing the company to start playing by those rules too…. Very handy if you don’t want to get laid-off during a crisis.
( )Rob January 13th
Thanks Adam! Will you marry me?
( )JP January 23rd
I think it’s funny that the world is still struggling with hacks and work-arounds and countless tutorials in order to emulate what the TABLE tag does so easily.
I’ve heard all the arguments for and against, and the jury is out as far as my view. But every time I read yet another article about the frailty and complication of a css based layout, I want to get out a copy of FrontPage 1.1 from 1995 and fill up 20-pixel-bordered tables with reams of Comic Sans and animated GIFS and dump the entire thing on a repeating patterned background! Oh yea, I can’t forget the little digging “under construction” stickman. Life was so simple back then.
( )V January 29th
@ author – Good tutorial but a bit hard to follow at times. I had to re-read the part about “Apply the class to correct grid_12 divs and set the ID. ” and TopSection a few times. Also, a few more progress screenshots next tutorial (or video). But thanks, I’m gonna give grids a try!
@JP – Awesome
( )Gunnar February 2nd
I personally like YUI’s grid system, 4 widths by default (of which one is 100% fluid), and I don’t come down with the same amount of divitus with that one.
( )Me February 10th
Reading the comments makes me laugh. I think most of the people choose an opinion just to stand for something and have an opinion.
These are tools – use the tool that helps you achieve your goal in the “best” (you definition here) way possible.
( )Ersin Demirtas February 11th
Thank You Adam Hawkins quik brife with Jeffrey Way this article helped me a lot
( )Ranjith February 13th
This indeed is a awesome resource for prototypers and even visual designers. The grid gives the designer a standard to work on and he can make sure that all the designs that are layed out are pretty easy to be converted into logical blocks, which are vital for a prototyper.
( )A great contribution to the web developer and designer community…i can say !
HyperCas February 14th
I started with blueprint, using it for a couple of sites. It was easy to pickup and fun. Then it started getting annoying when I had to start overriding a lot of stuff.
Then I ran across http://www.designinfluences.com/fluid960gs/ and got started using 960. As far as the 960 grid system goes, I really like the margins on both sides of the grid, it feels more right to me…
Blueprint’s grid generator is really handy when you want to choose your page width and grid size.
I made a similar one for the 960 grid system, mainly because I wanted to play around with jquery ui system and wanted a different page width for a website I am working on…
Check it out (made in a really short time)
http://tool.hypercas.com/960gen/
At v0.001 it just generates the uncompressed grid css file.
( )Kiribu February 16th
It’s a great solution for 960 site designs. But that’s all it does. People will always try and pull it apart. It’s just another solution for designers who dislike hacks and filters. But it’s got great power, and there’s an advantage to having restraints. Open up Photoshop or Fireworks and design to the grid! Then pop the images into the column divs and serve quickly to the couple on table two. Now that’s what i call a productivity enhancer. It’s called 960. Apologies for the Chef analogy.
( )Aaron Brown February 27th
For all of you who are concerned about corrupting the semantics of your markup, but are still interested in grid frameworks, check out the Compass project. Leveraging Sass, Compass allows one to ‘mixin’ style definitions from various grid frameworks (Blueprint, 960) directly into semantic css class definitions. The upshot being you can have a nav defined as an unordered list possessing the single class “main-nav” and still get the layout benefits of an underlying grid system.
You can find Compass on github: http://github.com/chriseppstein/compass/tree/master
( )Ahmad Alfy March 27th
You didn’t take about “prefix_x” and “suffix_x”
It’s very useful to add before and after your “grid_x” without writing more divs
Still I find BluePrint Framework closer to my heart!
( )CgBaran Tuts April 5th
Great Tutorial!!
( )cscsaba April 9th
Hello Guys,
I need somebody who can explain me why the usage of grid systems represents an effectivness of css framework.
What are the benefits think in grid systems.
shred light on the matter, pls .)
Thanks in advance
( )madmax November 10th
he grid system started with laying out text and graphics for print design, every time you read a magazine, newspaper etc, you are staring at the grid system, you dont realize this because its creates a harmony for you eyes, it also creates a design out of the layout, for instance, you may see a photo in the background of a city, over that photo you see your columns of text in a spot of the photo that contains a large area of one color, then you see a composition of large display fonts creating a design over the photo. this couldnt be done gracefully without css, and now we can use a standard “grid” to “layout” web design instead of hacking and pixel pushing your stuff around until it fits.
look here, and compare the compositions one is css layout and the other is plain old web.
http://www.csszengarden.com/?cssfile=150/150.css
(this looks like a magazine)
http://oldstylewebdesign.com/
( )(this guy is full of crap, he just doesnt know how to use current standards, this site is dookie, remember in back in 2000 when the majority of sites looked like this, everyone needed flash in order to attempt what you can do with lightweight css)
madmax November 10th
here is some further explaination,
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
in other words, the web will look more and more like interactive web magazines rather than static text.
Its like the difference between doing magazine layout in microsoft word compared to adobe illustrator or indesign.
( )Tom April 11th
Thank you, Adam. Excellent tutorial.
( )daidahan April 17th
Hola soy el primer latino que postea, me parece una excelente idea esto de la grilla. SALUDOS DE CHILE
( )anita September 19th
super que alguien hable español
( )Me April 23rd
Use a freakin table for crying out loud!
( )madmax November 10th
OMG, tables? what is the point of furthering web standards, tables give you dookie looking sites with no flexability in layout, css enables all the same directives as print design. you can define how far apart columns of text are down to the very pixel!! you can have total control over how your fonts are styled,
DUDE tables are lazy!!, save the tables for displaying data from a database, thats what they are for.
( )HesaPesa April 27th
Just don’t get it. The framework systems don’t support standard size banners… Anyone know how to solve it?
( )David April 28th
Create a grid system with the gridsystemgenerator, that way you can define the dimensions and such for the grid and thus fit in standard size banners.
http://www.gridsystemgenerator.com/
( )CSS Ninjalito May 1st
Seriously. If you haven’t heard of YAML – http://www.yaml.de/en/home.html
You better check it out. It is the De-Facto of CSS frameworks. Also it is WAY more lightweight. Plus it’s from Germany, you know those Germans are good at stuff.
Boo yah!
( )Utsav Singh Rathour May 3rd
Thanx Just downloaded the layout. Good to find your tutorial
( )Nicole May 7th
I don’t understand. What program do I use to learn this…Dreamweaver or Fireworks?
( )madmax November 10th
notepad and a webbrowser
( )Nicole May 7th
I don’t understand. What program do I use to lean this…dreamweaver or fireworks?
( )Alberto Scozzari May 13th
Make things easier
( )Hossein May 18th
I haven’t read it yet but anyway I appreciate your good deed and motivation to help others. After I read it I will let you know what I think.
( )tenerife May 21st
haven’t looked back since trying this – great stuff
( )tdurant May 28th
Thanks, I wish this was the first article I read about 960. It really laid out the practical usage for me.
( )Digital Froilan June 8th
Great stuff, this is my first time knowing about the 960 grid system.
( )Adam Gaskins June 11th
There’s more to the choice of 960px than just an arbitrary number that happens to work out for the 12 / 16 system. It is also close to perfect for the size monitors we should be targeting these days. 1024px wide. That gives room for scrollbar + window border and a little extra. Its like a 4-5 years back when we targeted 800×600, you would use 740px or 760px. 1000px would be too big in my opinion, only 24px left for scroll bar + window borders, whereas 960 == perfection. I know not many of us still use 1024×768 resolution screens, but we’re designers, there are still a lot of those monitors in use today. That said, I have never used this 960 grid system, but I am interested in giving it a try. It just so happens I always target 960px anyways
( )soz June 14th
This post answered me how to add the div border,Thinks a lot
( )Richard June 24th
Good sense of humor dude
( )Avinash June 24th
Can you possible add a follow up tut which shows the coding in a bit more detail?
( )lhoylhoy June 24th
Its is so easy to understand! I just started lately developing a wordpress theme based on this grid system! This post has been a great place to start with it. thanks!
( )Rudonja July 1st
Thank you a lot for this great tutorial.
( )1 small correction:
in the part where you add the ul and li for the navigation, you forget to drop the initial closing div.
negs July 15th
As of now, I’ve changed the name of the ‘clear’ class in 960.css to .clear-and-hide because .clear is a utility class that I use for being a simple clear.
I have found that a lot of times, if you need to clear to the next row, you can just put class=”clear” on the front of the new row itself. It is only sometimes that you need a separate clearing div. But the 960.css .clear class hides my content making the name deceptive. I hope I don’t get bitten in updates.
( )vlado varbanov July 24th
what prefix and suffix should be used for ?
( )Abida July 25th
Can’t understand why it’s useful when css is so simple ?
( )madmax November 10th
its useful because in print layout there is a universal grid system for consistent design layout, they grid can change and you may even use the grid abstractly but there is still a grid that drives the gutter space, margins, rag, etc.. you will notice the same directives in css to emulate print layout while designing web. This is why web pages are looking more and more like magazine layouts, because of css. Now we have a “standard” grid system that we can start with and then “tweak” to suit our needs, just like designing a mag layout in indesign or quark, but this is measured for browsers and pixels. css is simple however very seldom is “web layout” structured and consistent.
( )Dale Cruse July 26th
I think this is a great introduction to Grid 960. Thank you.
However, I believe there is a code typo that should be corrected. should actually be
( )Dale Cruse July 26th
Okay, let’s try that again.
should be
Let’s see if that works.
( )Dale Cruse July 26th
Okay, sorry. In the div class=”grid_12″ where the header is, you have an anchor tag = images/header.png
Instead of an anchor tag, that should be an image tag.
( )tonier July 30th
If you a designer or have a much time to learn W3 standard using CSS, then probably you don’t need to used it.
From a point of view of me, I’m a programmer, used a CSS Framework will give me more times to thinking about how my code work rather than how to design the layout. Yes its won’t be a big deal for you if you have a designer, but for me … sadly – I need to work all of this stuff alone
..
( )Türks Bilişim September 9th
this, very thank you..
Your site full professional and very beautiful…
( )kelvinwebdesigner September 13th
Nice, i love it! You write simple, technical, and easy to understand. I appreciate it, actually i should’ve read it a long time ago, but like they never is late to learn.
( )Keep writing
CG
brad September 17th
Tables rule!! CSS Sucks.
( )anita September 19th
you not speak spanish….oh my god…this difficult for my
( )Diogo Rodrigues September 22nd
I am Braziian, this tutorial is a very nice.
( )Grid 960 very cool framework css.
Thanks!
Lola LB September 22nd
Okay . . . if you’re saying to use this 960 Framework for prototyping, then start all over again and write CSS from scratch when creating the real site, well, what’s the point of using 960 Framework anyway? If I’m going to put in that much time using the 960 Framework to prototype, then I want to at least be able to use some of the code as the base.
( )madmax November 10th
no use it in your real site! have one css file named 960.css and include it as your framework, then include a second for page specific directives.
( )Fabrice September 29th
Hi,
. But, but 
, I have a question.
Very good tutorial
When I try this :
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
With this CSS :
div.topSection div {
border: solid 1px #e5e5e6;
height: 280px;
}
It’s break my columns. Any ideas ?
And if I want to add a border, only and all around the , it’ the same problem.
Fabrice
( )Dave L October 3rd
Great Tutorial…The Grid 960 system rocks!
( )Joe October 11th
Nice!!
( )Rachel October 13th
Great tutorial. I can not get the three columns in the footer to work. I’m using the stylesheet, but I’m not understanding the “alpha” and “omega” concept — for lack of a better word. I’m only getting two collumns side-by-side and the third column is underneath the first column. Any help?
( )Oss October 28th
maybe this will help…
simple:
You use OMEGA and ALPHA so they wont add an overall width to their “parent”…. anyway heres something else..
you can go on and on…
And for explanatory purposes you can also use 2 alphas w/o an omega.
.. play around with it in dreamweaver or something… anyway use divs sparingly and plan accordingly so you wont have to resort to ALPHAS and OMEGAS too much.
( )dave October 21st
For anyone new at this and finds it confusing even after the nice tutorial, two Firefox addons that helped me a great deal were “Firebug” and “Web Developer”. Once you have those installed check out http://960.gs/demo.html and use “Web Developer” to show ID and class details (it will be on toolbar under “Information”) of the page. Then use “Firebug” to select/inspect divs and experiment moving things around.
( )Oss October 28th
Its an awesome tool but must be utilized effectively. First its intention must be defined..well its basically a structural tool, thats all there is to it. Only after I define all my HTML tags and elements do I even touch 960. After that Im on my own. The main problem that seem to pop up with 960 is its semantics. Right now the way I get around that is ..ex ( id = “header” class = “grid_8)… For now that how Im doing it..Im not too familiar with LAMP … but judging with how 960 dealt with width constraints… I cant wait for semantic960…
( )w1sh November 4th
Demo is broken
( )madmax November 10th
I found a fix for a bothersome quirk concerning a background image in my container (this creates the backdrop for the container itself). I had two different pages that needed to be two different heights but needed to display the same container image, which is a 5px high x 950px wide slice of color that i used “background-repeat: repeat-y;” to display. Because the containers height is set, if the content extended longer, i was left with a gap. To remedy this i took out the height directive in the container class, and defined a new class named “.vert1 {height: 900px;}” and a second named “.vert2 {height: 820px;}. I invoked these in their respective pages like “” to place this at 900px high and the other page had vert2 declared. You could mod this and essentially create a grid matrix.
See im still learning this, and there may be a built in way of doing this already. If there is ofcourse i would revert to that, but for background imagery that tends to be static this seems to work.
By all means if some one can point out a simpler way, speak!
( )madmax November 10th
sorry the directive that is missing is
( )madmax November 10th
the directive that i was referring to is div class=”container_16 vert1″
madmax November 10th
another helpful tip for using this system, when designing its is some times hard to figure out what the grid is doing with your content, it doesnt do what you expected, this is a matter of troubleshooting the code and finding out what is out of place. to create a visual aid you can define a class callled “.show” and in it define a background color. add it to the grid class in your div and you will be able to visually see what it is doing. you can take that out when done. it really helps to trouble shoot positioning or determine if you need “grid_1″ spacing anywhere
( )