A step-by-step descrip­tion on how to cre­ate a Villard diagram.

Mark Boul­ton pulled together some of his thoughts and con­cerns regard­ing CSS grids and how they could be created.

An arti­cle that that takes a look at the rela­tion­ship between the grid and the use of guides.

Grids, along with visual hier­ar­chy, typog­ra­phy, color the­ory, rhythm, etc., are the basic foun­da­tions of design and yet they are widely ignored by the industry.

Step by step walk­through of the design and build process of a grid based Word­Press theme. From the ini­tial Pho­to­shop con­cept, through development.

Peo­ple, includ­ing myself are build­ing sites using grids. Now it seems to me that when you’re design­ing in a browser you want to be able to fol­low the grid’s prin­ci­pals all the way through the process.

A grid is a tech­nique that comes from print design but eas­ily be applied to web design as well. In its strictest form a grid is lit­er­ally a grid of X by Y pixels.

Have you ever sliced a lay­out, only for it not to be grid-aligned once it’s scripted?

I wanted to try and give some insight on how I cre­ated Ver­sion Four using a grid, and how I went from wire­frames to the fin­ished web­site you see here.

Smash­ing Mag­a­zine takes a look at over 50 arti­cles about grid-based designs and selected some of the most impor­tant and interesting facts.

An arti­cle by Ital­ian designer Andrea Pel­trin on how to effec­tively use grids for web design.

While grid design is a sim­ple con­cept, there are now so many tools and ways of doing it that it might get con­fus­ing for newcomers.

There is prac­ti­cally no (or very lit­tle) doc­u­men­ta­tion about this prob­lem on the web or in many typog­ra­phy or grid design books.

Quiet struc­ture is achieved when you de  –  empha­size the struc­tural ele­ments and bring a rhyth­mi­cal con­sis­tency to the layout.

Arti­cle on Mez­zoblue explor­ing the dif­fer­ent col­umn options for grid based designs.

Dis­cusses the steps taken when mea­sur­ing and cut­ting a comp layed over a grid and turn­ing that data into CSS.

An arti­cle on the Dev Opera site on how to imple­ment grids for the web through the use of CSS.

A quest for a sim­ple, design-centric Keynote tem­plate that’s more about com­po­si­tion than gra­di­ents and 3D bullet points.