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.

A PDF by Khoi Vinh and Mark Boul­ton that was pre­sented at the South by South­west fes­ti­val. The PDF cov­ers the his­tory of grids and the walks through the process of build­ing a grid system.

A key com­po­nent in the vehi­cle of com­mu­ni­ca­tion is com­po­si­tion, and in design school­ing it is taught as some­thing you should feel rather than create logically.

Cre­at­ing a com­plex grid sys­tem that allows for a lay­out to be divided into 2, 3, 4, and 6 columns and that’s based on Karl Gerstner’s grid for CAPITAL magazine.

Effec­tive ways of get­ting cre­ative with your columns in grid-based Web design.

It’s one thing to write about how use­ful and impor­tant grids are for a design, it’s another thing to uti­lize them in a real world project.