960px grid templates

I’ve created a selection of 960 pixel-wide uniform grid templates ranging from 3-columns to 16-columns, for both Adobe Photoshop and Fireworks:

View the repository on GitHub →

Although the margin widths of these uniform grid templates do vary, each one adheres to an overall width of 960px. All of the templates are released under a Creative Commons Attribution-Share Alike license, meaning you can distribute derivative works but only under a license identical to the Attribution-Share Alike license. They may be used for commercial purposes, but you may not sell them.

Nathan Smith, creator of the nifty 960 Grid System, already provides 12, 16 and 24-column grid templates that work well if you’re designing to build with his framework. But as someone who doesn’t actively use CSS frameworks, I wanted a greater variety of grids to aid in my site designs. I figured if I made them, I could release them for general consumption and maybe try to give a little something back to the web community that I’ve taken so much from!

Please, if you notice any issues with any of the templates or have suggestions on how to improve them, let me know. Thanks.

Grid Margin width Gutter width
3 column 10px 20px
4 column 10px 20px
5 column 10px 20px
6 column 10px 20px
7 column 14px 20px
8 column 10px 20px
9 column 13px 20px
10 column 10px 20px
11 column 17px 20px
12 column 10px 20px
13 column 9px 20px
14 column 14px 20px
15 column 10px 20px
16 column 10px 20px

Comments

  1. Hey Robbie
    Its good to have this resource. Thanks
    I wanted to know if you have some grid system for Tablets application ui designs? Or is there some logical way a grid could be designed for the UI designs for tablets or any touch devices?

    Let me know

    Thanks in advance

    regards
    Prakash

  2. Prakash, you can certainly create grid systems for use in designing interfaces for tablet/touch devices. In fact, I’d argue it’s essential!

    If you know the screens sizes you’ll be working to, you could just adapt my templates. Alternatively, you could use a tool like Gridulator to generate basic grid PNGs based on specific widths and number of columns.

  3. very nice! thanks for making such a handy tool

  4. Hey Robbie,

    Thank you so much for these. They look very useful and it’s great to have a wide choice to be experimenting with.

    Great site as well. Really like your portfolio of work.

    Cheers,

    James

  5. thx for this article, love the grid system :-)

  6. Hi Robbie,

    first of all thanks a lot for the grids! :)
    Got one Question as a newbie:
    Why the margin on the left and the right?
    Why the grid doesnt start with the content right away instead of a 10px margin first? Is it just that the content get some breath on mobile devices like the ipad? (left and right margin)

    Thanks in advance.
    peter

  7. I’m somewhat certain they’ll be informed a lot of new stuff right here than any one else!
    Thank you

  8. Loving the grids :) These are already coming in very handy! Keep up the good work :)

  9. That’s great, just what I was looking for. A real time saver, cheers.

  10. The grids are great, makes life so much easier. I started using the 960 grids not too long ago, and thanks to your download, your making designing websites a little bit easier! Super! :)

  11. Great article, thanks for resources

  12. Thanks a lot for sharing this.. n m using this now…. :)

  13. Thanks. Got a deadline tomorrow, This saves me a lot of time! Much appreciated.

  14. Exactly what I was looking for! Thank you so very much for sharing !!!

Comments are closed.