This arti­cle is for web design­ers and front-end web devel­op­ers who are inter­ested in grid-based lay­out sys­tems but are at a loss on how to decipher them.

Mark Boul­ton pulls together some of his thoughts and con­cerns regard­ing CSS grids and how they could (or, maybe, should) be created.

A holis­tic approach for the typical workflow.

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.

The Egyp­tians sup­pos­edly used it to guide the con­struc­tion the Pyra­mids. The archi­tec­ture of ancient Athens is thought to have been based on it.

You would be sur­prised to find out that most aes­thet­i­cally pleas­ing designs, works of art, objects and even peo­ple have math in com­mon. Specif­i­cally the Golden Ratio…

Use the power of grid based designs to cre­ate a struc­tured and pro­fes­sional page lay­out in InDesign.

A Wikipedia entry that defines the Rule of Thirds and how it should be applied.

Grid struc­tures are implicit in the word typog­ra­phy. To men­tion both typo­graphic, and, in the same breath/sentence, grids, is strictly tautologous.

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 on-line com­pan­ion to the book Think­ing with Type by Ellen Lup­ton that con­tains a sec­tion on single-column, multi-column and modular grids.

The sec­ond part to Sig­ur­dur Armanns­son excel­lent arti­cle on cre­at­ing grid sys­tems in Adobe Illus­tra­tor. This arti­cle is based around the grid sys­tem devel­oped by Marcus Gärde.

A detailed arti­cle by Sig­ur­dur Armanns­son on how to cre­ate a grid sys­tem in Adobe Illustrator.

When this occurs, your page is said to have ver­ti­cal rhythm  —  the text is eas­ier to read than text that doesn’t line up, as it feels more cohe­sive and less disjointed.

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

Another excel­lent arti­cle on the Dev Opera site cov­er­ing base­line grids and how they can be applied to the web.

An exper­i­ment in cre­at­ing a fluid grid sys­tem using CSS that resizes with the browser window.

Khoi Vinh is the Design Direc­tor for NYTimes.com, where he leads the in-house design team in user experience innovation.

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.

Step by step guide on cre­at­ing the grid used for the cov­ers of the orig­i­nal Pelican Books.

The Golden Sec­tion, Golden Ratio, and the grandiose Divine Pro­por­tion are all names for the same thing; a ratio of 1.618.

Khoi Vinh writes about estab­lish­ing a ratio­nal and sus­tain­able lay­out grid for his Sub­trac­tion site. He explains how he shoe­horns pre­vi­ous arti­cles into the new framework.

Five steps that cover the ele­ments which make a suc­cess­ful grid sys­tem and how they can be applied to a num­ber of media outputs.

A flex­i­ble CSS sys­tem by Jason Santa Maria for deal­ing with a vari­ety of images sizes by using mul­ti­ple CSS classes.

The main prin­ci­ple of the base­line grid is that the bot­tom of every line of text (the base­line) falls on a ver­ti­cal grid set in even incre­ments all the way down the page.

Grid design is a fun­da­men­tal skill of any designer. Under­stand­ing pro­por­tional rela­tion­ships, white space and com­po­si­tion are all vital in con­struct­ing a grid for any delivery platform.

In edi­to­r­ial design, there is a tech­nique used for side­notes and box­outs that aligns to the base­line grid, or ver­ti­cal rhythm. It’s called incremental leading.

Using a grid is one of those basic design principles. A grid is made up of ver­ti­cal and hor­i­zon­tal lines and is the foun­da­tion of nearly every type of visual media.

In this arti­cle, I will go through some sim­ple steps to acheive good clean well struc­tured typog­ra­phy in Adobe Indesign.

Put sim­ply, what it means is that rather than fully left-aligning an ele­ment with the grid, some padding is required so that the ele­ment is nudged away from the grid-line a little