When your website means business.

«Return to Blog List Free 4-column Grid Photoshop Templates for Better Web Design

Update 11/10/2017: Please note the date of this post. The post does not refer to the relatively new, not widely implemented (yet) Grid Layout.

Update 6/15/2015: In this age of responsive web design, you should be starting your templates with Zurb Foundation or Bootstrap. At this point there is little or no reason to design websites on static-width templates, and therefore:

The templates originally available for this post are no longer available for download.

Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).

In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.

Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.

Tags: , , ,

13 Responses to Free 4-column Grid Photoshop Templates for Better Web Design

  1. I was looking for a grid larger than 950 / 960 px, as the majority deals with. That’s a good one, thank you.

  2. Frederik says:

    many thx for this grid system.

  3. fred design says:

    Thanks so much for this – actually inspired me to make a more complex one based on yours. Has options for a four and three column template all based on 16 pixel divisions…be great to hear your thoughts…

  4. Boldis Media says:

    Wonderful grid, thank you!

  5. Pete says:

    Great time saver. Thanks a lot for sharing Ray!

  6. jami reighard says:

    Thanks! Love to see the interactive world embracing order. Keep up the good work!

  7. Dennis says:

    Thanks alot – looking forward to trying them out.

  8. Jastis Bago says:

    Thanks before iwant try this tempalte…

  9. MattCoops says:

    I’m surprised that W3schools assumes the lowest common denominator for screen resolution is 1024×768 with all the mobile devices out there.

  10. tun221 says:

    thank, i it work

  11. Ray Gulick says:

    Thanks, Andy. Hope you find the templates helpful.

  12. Andy Walpole says:

    Sir, you are the milkman of human kindness and I thank you for the extra pint :-)