An Introduction to Grid Systems in Web Design

Share this article

An Introduction to Grid Systems in Web Design
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.

Frequently Asked Questions about Grids in Web Design

What are the key principles of grid design in web development?

Grid design in web development is based on a few key principles. The first is alignment, which ensures that elements on a page are lined up along one or more vertical or horizontal lines. This creates a sense of order and balance. The second principle is consistency. By repeating visual elements and styles, designers can create a cohesive and harmonious design. The third principle is balance. This involves distributing elements so that no one part of the design overpowers the others. Lastly, there’s contrast. By varying the size, color, and shape of elements, designers can draw attention to specific parts of the design.

How can I create a responsive grid for my website?

Creating a responsive grid for your website involves using CSS media queries to adjust the layout of your website at different screen sizes. You can define different grid layouts for different screen sizes, and the browser will automatically switch between them based on the current screen size. This ensures that your website looks good and functions well on all devices, from smartphones to desktop computers.

What are the benefits of using a grid system in web design?

Using a grid system in web design has several benefits. It helps to create a consistent and cohesive design, making your website easier to navigate and understand. It also makes it easier to design responsive websites that look good on all devices. Additionally, using a grid system can speed up the design process, as it provides a clear framework to work within.

How can I use grids to improve the user experience on my website?

Grids can greatly improve the user experience on your website by creating a clear and consistent layout. This makes it easier for users to navigate your website and find the information they’re looking for. You can also use grids to highlight important information, guide users’ eyes through the page, and create a visually pleasing design.

What are some common mistakes to avoid when using grids in web design?

Some common mistakes to avoid when using grids in web design include not aligning elements properly, not maintaining consistency in the design, and not balancing the distribution of elements. It’s also important to avoid creating a design that’s too rigid or boxy, as this can make your website look outdated and unappealing.

How can I use grids to create a mobile-friendly website?

To create a mobile-friendly website with grids, you’ll need to design a responsive grid layout. This involves defining different grid layouts for different screen sizes, with the browser automatically switching between them based on the current screen size. You’ll also need to ensure that your design is touch-friendly, with large, easy-to-tap buttons and links.

Can I use grids in combination with other design principles?

Yes, grids can be used in combination with other design principles to create a more effective and visually pleasing design. For example, you can use color, typography, and imagery in conjunction with your grid layout to create a cohesive and harmonious design.

How can I use grids to create a visually pleasing design?

You can use grids to create a visually pleasing design by aligning elements along the grid lines, creating a sense of order and balance. You can also use grids to create contrast, by varying the size, color, and shape of elements. Additionally, you can use grids to guide the viewer’s eye through the page, highlighting important information and creating a visual hierarchy.

What tools can I use to create a grid layout for my website?

There are many tools available to help you create a grid layout for your website. Some popular options include CSS Grid, Flexbox, and Bootstrap. These tools provide a framework for creating grid layouts, making it easier to align elements and create a consistent design.

How can I learn more about using grids in web design?

There are many resources available to help you learn more about using grids in web design. Online tutorials, blogs, and courses can provide valuable information and practical examples. Additionally, studying the work of other designers can provide inspiration and insight into effective grid design techniques.

Callum HopkinsCallum Hopkins
View Author

Callum Hopkins is a designer and front-end developer with over 6 years web experience and has a Bachelors degree in Design for Digital Media. With knowledge in both design and development he is able to influence both sides of the web building process, and has a love for complex coding functions and beautiful design. Callum works as a developer for Deer Digital LTD and runs his own personal blog at callumeuanhopkins.co.uk where he writes thought provoking articles.

960 gridbootstrapbootstrap-hubBootstrap-resourcesgridgrid systemtutorial
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form