When your website means business.

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

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.

Templates no longer available for download.

ShareShare on FacebookShare on Google+Share on RedditTweet about this on TwitterShare on LinkedInEmail this to someone

Tags: , , ,

14 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. Anthony says:

    thanks, i’ll have a play around with this when designing webites in the future

  9. Jastis Bago says:

    Thanks before iwant try this tempalte…

  10. 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.

  11. tun221 says:

    thank, i it work

  12. Andy Walpole says:

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

  13. Ray Gulick says:

    Thanks, Andy. Hope you find the templates helpful.