Why We Love Grids

Grids are a way of organising graphic design using:
proportions, ratios and aesthetics.

Grids are formed of columns, rows and margins that make up the structure of the page. This enables all the pages to have some level of consistency as well as being pleasing to the eye. Using grid layouts can make the design process a lot quicker as images; blocks of type and headings can be arranged very quickly. In terms of usability, information can be read more quickly and easily as well as being more easily understood and retained in the memory.


It is fairly common for layouts to contain 12 columns, as this can be split into sections spanning 2, 3, 4 and 6 columns whilst still maintaining some structure and continuity, without leaving any empty units. These are all fairly symmetrical and give a more formal look to the page.


More obscure layouts have grids with 3 columns or even 7. These layouts tend to be less symmetrical, as an image may span 2 columns and text over 1 column. They are leave room for white space, which can help the eye focus on certain parts of the page as well as welcoming 'breathing space' for the reader.

Josef Muller-Brockmann

Josef Muller-Brockmann is a Swiss designer famous for his poster adverts for theatre productions in Zurich. His work is said to create "mathematical harmony, which reflected the harmony of the music." Josef did not restrict his designs to horizontal and vertical alignments, but began working on diagonal axis. This created a much more lively and controversial layout to normal grids.

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."
Josef Muller-Brockmann

Brand Consistency

Many companies will use a consistent grid layout to maintain their brand continuity and visual identity. However, they alter the way they use these grids to add some variety to the pages or designs. Rather than becoming a rigid plan, grids facilitate creativity and provide a framework. For example, Creative Review use this grid in their magazines. The page layout is split up into 12 columns, which allows for plenty of flexibility throughout the whole of the magazine, but with consistency to the design and proportions.

"The secret of a grid's success is not so much its structure as the imagination with which it is used."
-Allen Hurlburt

Grids in Web Design

Grids are not only used in print, but in web design too. There are many sizes of grids but we use either 960 or 1140 for different purposes.

A page width of 960 pixels consists of 12, 16 or 24 columns. The columns are set with a width of 60 pixels with a 20-pixel gutter, these measurements decrease as the number of columns increases. They are designed to look good on all monitors, and are defined by exact measurements so horizontal scrolling is not needed.

There is also the 1140 pixel grid, which fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser, even on Mobiles! This is because it is made up of percentages as well, and so the content compresses to fit on the smaller screen.

"A grid is not meant to lock you in a limiting mindset. Grids are guides to follow: they enhance user interactivity and page element placement."