Grid-based design is obviously a popular approach in modern web design. Ford designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here.



Articles:




Grids Are Good - Presentation in a PDF document



Grid (page layout) - Wikipedia



Why Use a Grid - Mark Boulton



5 Simple Steps to Designing Grid Systems: Preface - Mark Boulton



5 Simple Steps to Designing Grid Systems: Part 1 - Mark Boulton



5 Simple Steps to Designing Grid Systems: Part 2 - Mark Boulton



5 Simple Steps to Designing Grid Systems: Part 3 - Mark Boulton



5 Simple Steps to Designing Grid Systems: Part 4 - Mark Boulton



5 Simple Steps to Designing Grid Systems: Part 5 - Mark Boulton



Feeling Your Way Around Grids - Mark Boulton



Oh Yeeaahh! - Subtraction



The Funniest Grid You Ever Saw - Subtraction



Grid Computing… And Design - Subtraction



Grid-Based Design 101 - Most Inspired



Grid-Based Design: Six Creative Column Techniques - Smashing Magazine



Using a Background Image Grid to Layout Your Website - Smiley Cat Web Design Blog



Thinking Outside the Grid - A List Apart



Setting Type on the Web to a Baseline Grid - A List Apart



Columns and Grids - Mezzoblue



Grid Design, A Classic Beauty for Whitespace Freaks - Wisdump.



Design Grids for Web Pages - Web Style Guide



Grid Tips for Photoshop Users - Made by Elephant



Grids: an Invisible Foundation - Ideabook.com



Using Spreadsheets to Brainstorm Grid Layouts - The Design Canopy



Grids Make Eyes Happy: How to Use Grids - CROWDCTRL



Grids: Show ‘Em if You Got ‘Em - Apples to Oranges



Designing Grid Systems for Flash - AisleOne



Gridding the 960 - Cameron Moll



Vertical Grids - Position is Everything



Grid-Based Design - Welie



Introduction to Layout Grids - Adobe



Cutting and Sewing Grid-Based Design: Working with Other People’s Comps - urlgreyhot



Grid-Based Design: Designing Blog Theme Templates - urlgreyhot



The Grid: Structure of Design - Poynter Online



Developing the Grid that Supports Your Design - Emmanuel Blogonic



Grids: Order Out of Choas - About.com



Gridlasticness - SimpleBits



Ruler from Airbag - Creating a background image to help with your grid design



Galleries:




Design By Grid - CSS gallery for grid-based design



Gird and Column Designs - Web Designer Wall



30 Blogs with Grid Based Design - CSS Juice



Tools:




Grid Designer 2 - A popular online tool for setting up a grid



Grid Maker - A simple web application to design a grid



GridMaker 2 - A downloadable tool to assist with creating mockups



960 Grid System - Set up a grid for the common 960 width.



Grid Calculator - Another online tool for creating grids



TypoGridder - Helps with the baseline grid



CSS Grid Calculator - A simple online calculator for setting up a grid



Web Page Layout Grid - A large image to use in the background when designing with a grid



Browser Grid - Shows the maximum safe sizes for different resolutions



Layout Grid Bookmarklet - A design tool from Andy Budd



Grid Overlay Bookmarklet - A variation of Andy Budd’s tool



Phiculator - A simple tool which, given any number, will
calculate the corresponding number according to the golden ratio.



Blueprint CSS:




Blueprint CSS - CSS framework which aims to cut down on your CSS development time



Links to Blueprint Resources - A number of resources are linked here, so are mentioned below



Blueprint Layout Tool -



Photoshop Template for Blueprint CSS Comps - Helps you to create grids with Photoshop.



Yahoo Developer Network:




Page Grids - An article about designing with grids.



YUI Grids CSS - Foundational CSS with 4 preset widths.



CSS Grid Builder - Grid-building tool from YUI.



How to Play with Yahoo Grids CSS - Article from Black Mountain.



WordPress Themes:




Particles - A free grid-based WordPress theme.



unGrid - A free grid-based
WordPress theme.



Bedrock - Premium grid WordPress theme for charity.

Source