1   Blair ~ 14 December 2006

Just wanted to say thanks for the background grid. I appreciate it.

2   Josh Pigford ~ 14 December 2006

FYI, the first grid (3 column) image links to a small image while the others link to a full-size.

3   Alex Giron ~ 14 December 2006

This is the closest I’ve gotten to construction my own grid on a site: dfckr grid. I used that in conjunction with Andy Budd’s Layout Grid Bookmarlet, which works wonders.

4   Kevin Tamura ~ 14 December 2006

Very nice little trick.

5   Brent O'Connor ~ 14 December 2006

Awesome post! I really learned a lot by looking at the images you made and exploring some of the sites you linked to.

I did find a small mistake, you might want to fix in your 960grid.png image. On the 160 (1/6) line you have it listed as 120 (1/8) on the bottom.

6   Ramon Bispo ~ 14 December 2006

Great!

Very useful!

7   Katie ~ 14 December 2006

YOU SO ROCK!
Thanks for the grid :)

8   ~ 14 December 2006

Thanks Cameron,
This is Awesome.

10   Erwin Heiser ~ 15 December 2006

Thanks Cameron, that’s going to come in real handy!

11   Jake ~ 15 December 2006

That YUI Grid Builder is amazing!

Though I’m having problems in downloading the CSS that it produces.

I’ve created a layout I’ve always wanted but never could seem to figure out how to code. When I click “show code” in YUI Grid Builder, it links to stylesheet’s that I can’t seem to find where to download. :(

Is anyone else having similar problems with YUI Grid Builder, or know what I’m doing wrong.

Thanks

Jake

12   Basel ~ 18 December 2006

That was great, i was in the Boston event and you did a very well and informative presentation.

13   Christopher Fahey ~ 18 December 2006

Not to throw cold water on a very helpful little article, but I have started to notice something about this whole grid thing that concerns me. I’m all for grids, obviously, but it seems like it’s becoming so standardized that it risks missing the point of using them in the first place (I’m not saying Cameron misses the point, just that something is more generally missing from the dialogue).

What so many “nouveau grid” systems seem to have in common these days is a rigid adherence to evenly-sized columns and page symmetry, as is common with traditional newspaper design. On the web, there is the possible exception of an uneven left or right column to support ads or a navigation, but otherwise the columns tend to be pretty evenly spaced. That is, web sites might have a A-B-B-B-B layout or a A-A-A-A-B layout, where A is one width and B is another.

But this doesn’t have to be the case. There’s no reason why your grid can’t have an A-B-C-D-E structure with many different column sizes. Or a structure where there is one grid at the top of the page and another at the bottom. Looking at the history of grid systems, non-regular grids aren’t unheard of and can be very exciting and dynamic in their implementation.

The point of a grid is not primarily to ensure that all of the items on a single page are evenly sized and evenly spaced, or to achieve columnar regularity across a page’s elements. There’s nothing wrong with using a regular simple grid as a core design strategy (in fact most designers would probably benefit from that approach to help guide them away from completely haphazard structures), but it’s not the best reason to use a grid for your design. Rather, it is intended to ensure graphic consistency across many pages, to establish a stronger brand identity and page readability across a wide variety of page layouts and content types. This can be accomplished with many types of grids.

14   Jelle ~ 18 December 2006

Think i’ll use this. Thanks

15   Somebody Else ~ 18 December 2006

Nice article @ 24 Ways

17   Ty ~ 19 December 2006

I just wanted to say, that if you are reading this, then you’ll be designing with the big boys in no time…
I’m going to place the grid pic in a PSD called gridStarter ;)

18   Armin Beširović ~ 19 December 2006

Grids are useful and needed stuff but somehow I don’t like locking stuff in them. In a creativity test I took a few months ago, people who drew out of the box got higher points and I think the same applies to web design. Sometimes, getting out of the grid will boost your creative engine whilst keeping in grid is sane for projects that demand it.

Don’t find this as a disregard (this grid was already subject to one of my pieces ^_^) but I belive that fixing stuff in a grid isn’t always the way to go.

Christopher mentioned about grids being used in print design and maybe this post could be used as an intro to an article about print design?

Anyways, beautifull work, like the grid image very much :)

19   Phil ~ 19 December 2006

Excellent! I literally just opened Photoshop to start a new design for a client. What timing!

20   Manny Hernandez ~ 19 December 2006

Cameron:
Very handy grid!

I can definitely say I enjoyed your talks at Web Design World in Boston.

Hope you are able to consider the opp. to be a part of our advisory board back in Full Sail at some point in the future.

21   tripdragon ~ 20 December 2006

All of this and that about formating. When the client just wants t done and done pretty. And with flash and style and they still really dont care about getting on pdas

Weird eh

22   Ian Adams ~ 09 January 2007

You know, I actually ended up at 932px for my site’s new design. The two factors that led to that width was that I position my Dock on the right of the screen, and that I also left a little room for the scroll bar.

Still, though, it looks like a handy resource! I’ll have to give it a whirl on my next project. :)

23   Ren ~ 21 January 2007

Great post — I really appreciate what you do for the design community.

I don’t know what caused it, but if you view the image in Safari and then right click to save the image, the measurements won’t line up. If you just right click the link and save the image directly everything should look good when you open it up in PS.

Hopefully that saves someone a bit of trouble :)

24   Paul L. ~ 07 February 2007

In addition to Mr. Fahey’s comments, one should also remember that many grid systems used in print are based on the geometry of the “golden rectangle” and the ISO paper system. They aim to utilize the inherent relationships found between objects arranged on a page as they relate to one another and the golden rectangle itself.

25   sissT ~ 10 April 2007

Great post and thank you for the image. This is a great help!
I am thinking about the ruler though. It is based on a “normal” ruler a 10px grid with 10 subdivisions.
My designs are usually based on a 16px grid with 4 subdivisions. So for me i would be much easier to have a ruler based on 16px. So i took your image and changed the ruler to a 16px-based ruler.
If anybody is interested you will find it @ http://www.the-lighthouse-keepers-cat.com/wp_en-EN/2007/04/10/84/

26   Redirect ~ 15 April 2007

thanks for grid ;)

27   Robert ~ 18 April 2007

Thank you for the excellent work.

28   Mark ~ 27 June 2007

What resolution did you use when you made that image? Not only does it appear to be a little blurry, but the lines in the image do not line up with the pixel ruler in Photoshop. Just curious.

29   Mark ~ 28 June 2007

Do these spammers understand what rel=”nofollow” means or even does? This is to all spammers, everywhere: STOP. WE DON’T CARE ABOUT YOUR LAME PRODUCTS. YOU SUCK AT LIFE. DEAL WITH IT.