Grid often used in print based works for magazines, newspapers and other types. But now with high popularity and fast development of web design grid system is often used to clear organization of huge amount of data on web sites. Also it is a modern method for web developers to speed up creation of mockups and frameworks. Other methods of presentation of information in the web are float layouts and even tabs. And it is clear that modern web-designers should know about grid tool and at least understand how and when they can use it.

In this essay I will talk about history and two points of view about grid systems: if it is a useful tool or if it is just a waste of time with extra code. After that I will analyze usability of sites which use this system and will make a conclusion about grid.


The grid has played a central role in the development and consolidation
of the modern movement in twentieth-century graphic design.

— Jack H. Williamson

A grid disaggregates a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images.

The first definition of word "grid" we can find just in the mid-twentieth century. But before this date designers, commercial artists and other creators had been thinking about content, space, proportion, and form. The ancient pages were surprisingly modern, often using more than one column, with lettering that was ranged left, and color and variations in letter size used for emphasis. Taken from a late-sixteenth-century English Bible (pic.1), this page shows how printers quickly adopted symmetry. The text is justified and the two columns placed symmetrically on the page.

Late-sixteenth-century English Bible page

Pic.1. Late-sixteenth-century English Bible page

From the mid-fifteenth century until the Industrial Revolution (late eighteenth century), the book was the primary output of printing. And type was generally set in one justified column per page, placed symmetrically on the spread with larger outer margins than inner, and a larger margin at the foot than at the head (pic.2). Also in this period people started to use Golden section measure which means the relationship of short to long side of a golden rectangle is 1:1.618.

The Meditations of Marcus Aurelius Antoninus

Pic.2. The Meditations of Marcus Aurelius Antoninus, published in 1792, uses the golden section to determine the text area.

Industrial revolution created profession of graphic designer. This job needed to communicate between increasingly literate people with help of print messages. There was rise of posters, leaflets, newspapers and magazines (pic.3).

The English Illustrated Magazine of 1884

Pic.3. Industrial revolution's leaflet (the English Illustrated Magazine of 1884)

In 1917 Dutch architect, designer, and painter Theo van Doesburg founded de Stijl where members advocated minimalism using only rectilinear forms and limited color palette: the primaries plus black and white. After that typographer Jan Tschichold wrote 2 books about typographic principles: The New Typography (1928) and Asymmetric Typography (1935). In his work Tschichold explored vertical and horizontal alignments and used a limited range of fonts, type sizes, and type weights.(pic.4)

Tschichold's work Asymmetric Typography

Pic.4. Tschichold's work Asymmetric Typography (published in 1935)

During WWII, and in the decades that followed, typography in Swiss was developing very fast (better than in other countries). Several Swiss artists, most notably Max Bill and Richard Paul Lohse, explored systematic forms in their paintings concurrently with graphic design, while the graphic designers Emil Ruder and Josef Muller-Brockmann both wrote educative texts explaining what grids were and how to use them. For example, in Josef Muller-Brockmann's Grid Systems in Graphic Design he explains how multicolumn and field-based grids can be used flexibly to achieve any number of different layouts in both 2-D and 3-D work (pic.5).

Josef Muller-Brockmann's Grid Systems in Graphic Design

Pic.5.Josef Muller-Brockmann's Grid Systems in Graphic Design

What does grid mean now?

According to the web site (July 2010) the grid idea stems from one of the oldest and most basic design principles: alignment. The majority of people prefer orderly and well organized information on a site so the grid system provides this opportunity. This theory has been around for thousands of years and was exemplified in the works of Pythagoras, who proposed numbers as ratios rather than single units (, 2011).

It is clear that basic of web grid is a typographic grid which is used for newspapers and magazines (pic.6.1. and 6.2.). According to Wikipedia typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. And it is not surprise that web designers adopt this method to presentation of online information.

Typography grid Typography grid Typography grid Typography grid Typography grid

Pic.6.1. and 6.2. Typography grid.


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

  • Grid saves time. Developers who work with grid systems don't need to use calculation on every step and every page. They just can set up specific settings on first stage of development and decide which quantity of columns they want to use: 12 or 16 (the most popular choice). After the procces of specification of these settings web developers can use a standard HTML code to create a grid (Pic. 7 and 8).
  • Grid code is easy to read. When one designer gives his project to another professional or if they just work together it is easier and faster to read standard grid code than try to understand individual code of each other. Grid code is more clear and structured than "hand" code and it saves time when you need to remake or improve old design.
  • Grid systems provide good cross browser support and reduce CSS coding errors. It is one of the strongest benefits of this system. It allows increasing usability and accessibility of the site.
  • Can be used sort of like a wireframe allowing you to plan. Web Developer could plan first and add details and visual information later. It is very useful point which increases popularity of grid: designer no need to work with different tools (for mockup and for code of real site) and it save time too.
12-column grid (code)

Pic.7 12-column grid (code).

12-column grid (page)

Pic.8 12-column grid (page).

Overall, using grid makes sense of clear organized of content and harmony for all elements on the page: text, images, typography, menu and so on. Cross browser support and error checking also influence on popularity of this tool and help to web developers to save their and clients time.


The grid is a harmonious and reliable system for presenting information. One of the main themes of discussion is whether it is a good tool for web designers and developers or whether it is a better way to make all calculations by hands. One view is that now it is a common tool for many professionals.

Advantages of grid:

On the one hand there are many people who support using this tool.

  • The first advantage is that the grid system saves working time of developers and makes the proccess of creating of the site and changing of the existed pages easier.
  • Another benefit is that this program simplifies the support of frameworks because web designers use the same techniques each time they work with it.
  • An additional benefit is that frameworks solve different problems with browsers.

Disadvantages of grid:

On the one hand there are many people who support using this tool.

  • On the other hand, critics say that the grid system makes pages of sites heavier.
    ❗ But it is essential situation because grid in web means adding of extra HTML and CSS code.
  • Another drawback of working with grids is that it is necessary to use specific classes of coding.
  • It needs extra time for new web designers to learn it.
    ❗ But with every new code or tool web developer should to sort it out at least first time.
  • This system makes developers conform to the rules without any compromises.
    ❗ It is a advantage at the same time because it is guaranteed control and constancy of process.
  • Another disadvantage for some designers is that this system can destroy creativity and give no freedom to design and make site unusual and different from thousands of other.
    ❗ But grid is just the tool and not fixed wireframe and every web developer can make sites without any limits.
  • According to Aisleone blog, another popular myth is that Grids require a lot of content.
    ❗ It is a wrong thinking because one of the main goals of the grid system is to make a strong cross browser usability, hierarchy and readability. Content in this system takes second place.
  • Another important misunderstanding is that Grids only benefit is a certain design.
    ❗ But grid is just a foundation and each web developer can use it for any style of design: from minimalism (pic.9) to high saturated site (pic.10).
Minimalism style of grid

Pic.9. Minimalism style (

High saturated style

Pic.10.High saturated style (


There are different classifications of grid systems which help to solve different tasks.

Fixed and fluid grid

Most popular system for fixed width is system which works with the same width. This tool provides 3 types of CSS files for 12, 16 and 24 columns.

Also this tool has special files for work with Adobe Photoshop and Fireworks. Open source code and good documentation make users friendly and ideally for design sites with 960 pixels width.

Bootstrap ( is a fixed wireframe which packed with next features: 12 column grid, JavaScript library, typography, form-controls. And also there are different versions of settings for desktops, tablets and smartphones.

Fluid grid ( - this tool based on famous 960 grid system but provide more opportunities for web developers who want or need to use fluid design.

Typography types of grids

If to talk about grid design there are different common methods of page presentation.

Golden section

Mathematical conception of golden section is well known from the acient times. This method is often used in different projects: from architecture to web-design. Principle of golden section is used in papers and magazines for more than 100 years and it becomes more and more popular. Many contemporary designers find this apparently irregular ratio unsettlingly chaotic, but others feel that the number sequence at its core has almost magical properties. Golden section (or proportion of the God) is a situation when the smaller of two elements relates to the larger element in the same way that the larger element relates to the two parts combined. (Pic.11)

Golden rectangle is a figure where one side relates to another as 1,618. On the sites golden rectangle is used not only for estetic reasons. Navigation or any other element of the interface apprehends easier if it is designed with principle of golden section.

To use this method it is necessary to divide the width of the visible part of the site to 1,618. The result is the width of the main part of the site (part with the content). Remain is a border. For example, if the width of the screen is 1024px than the content part will be 1024/1.618=632.88px. And the border will be 1024-632.88=391.12px.

Using of the golden section doesn't gurantee that design of the site will be great. There are many different important factors. But golden section will bring a balance, completness and easiness of reading of the site.

Golden section

Pic.11. Golden section

Single column grid

When you create a new text document you will get an example of single-column grid. Usually it is a huge text with borders. In web design it is often used to publish large documents. (pic.12)

Single column grid

Pic.12. Single column grid.

Multi-column grid

Multi-column grid provide an oppotunity to tweak a design of the page. The more columns developer creates, the more flexible the grid becomes. By changing the width of the output "columns" web-designer accents attention on different parts of the page.(Pic.13)

Multi-column grid

Pic.13. Multi-column grid.

Modular grid

Modular grid is "updated" multi-column grid system. Web-designer is able to set up the height of the rows as well as the width of the columns. By using this method developer can create and code unusual and interesting design of the site. At the same time it won't lose its easiness of reading and perception.(Pic 14.)

Modular grid

Pic.14. Modular grid.


I will analyze sites with genre: portfolio of work. On portfolio site web designer needs to brand himself. And this site should reflect unique style of author and manifest of high quality of previous works.

In particularly, I am interesting in portfolio of work of web designers because I will do site with this genre for myself in future.

Mark Hobbs's site

Mark Hobbs
Mark Hobbs
Mark Hobbs

Old version of Mark Hobbs designer site (new one in progress). Author used grid system with 960px fixed body width and 12-column grid. Portfolio information concentrates in three wide columns, while two text block take 2 wide columns (grid system with 12 columns give a excellent flexibility and web designer could mix columns how he likes). Another task which grid helps to solve is dynamic and live presentation of content with good readability and clear order.

Read more

Kathryn Cornelius's site

Kathryn Cornelius
Kathryn Cornelius
Kathryn Cornelius

Kathryn Cornelius web site based on 960 px wide grid. On main page author used 3 columns to structure all information and comfortable located 4 buttons in top menu and 3 buttons in bottom menu. On "portfolio" page developer used 2 columns grid to symmetry structure all portfolio works and it should be noticed that bottoms menu with 3 columns is disappear from this page. At first sight site makes very light feeling.

Read more

Andrew McClintock's site

Andrew McClintock
Andrew McClintock
Andrew McClintock

Site of web designer Andrew McClintock based on 960px grid system and solve different presentation tasks with 3 and 4 columns at main and portfolio pages respectively. It looks like heavy and solid site with huge amount of information.

Read more

Joey Lomanto's site

Joey Lomanto
Joey Lomanto

This is site of web designer which design was stolen by another one and that is why he creates this mini site with his opinion and advices. Designer Joey Lomanto used grid system with 1140 px width. 12 columns help to organized and systematize all information. Author used this grid system to clear presentation of different content in 2, 3 and 4 columns.

Read more

Laura Veronesi's site

Laura Veronesi
Laura Veronesi

This is site of Laura Veronesi, an illustrator and graphic designer and also a letterhead. In this site used classical 3 column grid with width 300px each. And again grid helped to present information in good and compact look. And for portfolio page it is better way to present works.

Read more


In my essay I have analyzed different sites and wanted to emphasize that for portfolio sites (it does not matter what theme of works is) grid systems are better way for presentation of information. Different grids can help to organize and systemize all data and show it in a good light.

Also the grid is a useful tool when developers need to do monotonous tasks every time, for example, to create similar sites. But it is clear that designers should learn before making the first steps with this framework. It is important to learn to achieve balance, symmetry and place emphasis on important content all through the use of the grid.

Grid can make designs of different sites look pretty same. So it is necessary to remember that grid is an instrument of the developer, not a purpose. And it is better to create grid for existed design than to change the design to insert it into grid. And developers always should keep in mind that with the right method of approach grid system is the great and powerful tool which helps to create each time new and unique sites.

Irina Sideleva, 2013