Blogs

An Introduction to Grid Systems in Web Design

Callum Hopkins
Share

In web design, grid systems are invisible structures that collect all the elements within a web page together. In this article, I’ll provide an introduction to grid systems, explaining what they are, their purpose, and some of the theory behind them.

Wikipedia explains a grid system as —

a structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

The Nature of Grid Systems

Grid systems are never properly visible, but traces of a grid’s “discipline” can be seen by the placement of elements within a web page. Grid systems also dictate the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid’s main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design.

Unity in Grid Systems

Alex White’s Elements of Graphic Design explains the use of unity through a grid system:

Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly … So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.

However, the benefits of a grid system on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann’s Grid System is Graphic Design. He writes:

A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

Grid Systems Beyond Web Design

Grids aren’t just restricted to web and graphic design. Almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.

What Grid Systems Are Available?

Grid systems for web designers to use are everywhere on the Internet. The king of the grids has been deemed “The 960 Grid”. The 960 Grid has the following structure:

  • Total width 960px.
  • 12 columns maximum, 60px each wide.
  • Each column has 10px left & right margin. In turn, this makes 20px of gutter space on the edges.
  • Total content area is 940px.

One of the main reasons for the 960 grid’s popularity with designers is its flexibility. Designers can use a wide range of columns, with the maximum number being 12. The most popular examples are:  9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4 and 10 x 2. The grid has also been used on a wide range of websites, such as Assistly, Drupal, 51bits and Sony Music. To see these sites’ grid systems in action, head over to the official 960 Grid home page.

The 960 grid has always had a very close connection to “The Blueprint Grid”, but they do have a lot of differences. To begin with, Blueprint has an in-depth setup for typography, whereas the 960 grid system setup only has minimal typography in place for a guideline rather than a shipped setup. I prefer this approach, because both grid systems were released some years ago and the web typography front has changed rapidly. Therefore the 960 grid system allows for more flexibility when using modern typography in designs.

Another notable feature in the 960 grid framework is the lack of pull quotes in the setup. Nathan Smith (creator of the 960 grid) states:

Those are things I rarely use, and I consider that to be a bit more design and contextually content oriented than related to page layout and prototyping.

I’m not entirely sure about the pull/push quote design, and frankly, I get slightly put off by their appearance in websites, because it makes me feel like someone is over compensating. In addition, if the pull/push quote design is produced without much thought or guidance, it can really pull the overall design of a website down.  However, I do understand that it is a popular design element in modern websites, so appreciate Blueprint’s inclusion of a template for the feature.

This means that if I were creating a scoring system for 960 vs Blueprint, it’s currently 1-1 and down to the my last key difference — vertical rhythm. Vertical rhythm is the consistent spacing between sentences and paragraphs in website content, or in other words, line height. Off the bat, Nathan Smith again states that, while he feels vertical rhythm is an important factor in web design, he believes “it is fragile” and can easily be damaged by a content editor’s placing of an image within the text.

My verdict: I’m going with Nathan Smith purely because, as a developer, I know how many CMSs will allow users to place images of any size into any position within the text. They have no regard for intricate vertical rhythm. There are many workarounds to deal with this, but I feel that for it to truly work is circumstantial. If you have a project where it will be respected, great, but for the majority of cases I think 960 has a more realistic attitude.

It’s my opinion that the 960 grid framework is the better option, but honestly try them both out and see which one works best for you.

Other Grid Systems and Further Reading

There are loads of grid systems available for use. It’s all about personal opinion, so if you’re looking for grid systems, there’s only one place to go: The Grid System.

For further reading, here’s a small list of articles that cover the grid systems I’ve talked about in more depth:

Another way of dealing with grids is to use a CSS framework like Bootstrap. If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our Introduction to Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.