Designing with Grid Systems

We'll introduce you to grid systems and how they can make your life much easier when designing websites

Scroll down...




grid systems

Source: AlleyWatch

You might be concerned that you're poking around in the dark when it comes to placing everything properly on your webpage. Where exactly should you put the left column? How much space should you leave between elements?

Luckily for you, designers long ago realized how important the CRAP principles are for composition and began using grid systems to keep everything in order.

Grid systems are basically just formal ways of dividing the columns (and possibly rows) of your layout based on simple mathematics. The most popular ones divide the page up into 12 or 16 columns with "gutters" of space between them. This is convenient because 12 and 16 are easy to divide up into sub-multiples like 2- or 4-column sections. Grids typically (though not always) have a fixed width which is a nice multiple of the columns and gutters involved (like 960 pixels).

Grids are a great way to keep all your elements on the page aligned and positioned in a way that is visually pleasing without having to worry about exactly how many pixels are between them or how wide they are -- it's all taken care of for you.

Even better, the popularity of grid systems for graphic design has translated onto the web too. Many popular CSS frameworks (which we'll cover in a separate mini-course) are based on grid systems and they will make your life as a developer much easier.

Grid Basics

Basically, you can divide a page into as many pieces as you want -- it's up to you -- but the most pleasing are typically round numbers with plenty of factors (like the aforementioned 12 or 16). The following articles dive deeper into the theory and practice of using grid systems.

Read All About Grid Systems by Rachel Shillcock from Tutsplus.

Read Choosing a Grid System by Rachel Shillcock from Tutsplus.

Read Using Alignment to Improve Your Designs by Rachel Shillcock from Tutsplus.

Finally, browse through This influential presentation by Khoi Vinh on using grids to design a site:

Go Exploring

The 960 Grid System

960 Grid System

One popular grid system is the 960 grid system. It's based around either a 12 or 16 column grid, both of which add up to 960 pixels when the gutters are taken into account. Visit their website and look through the diagrams and examples of how their grid system is applied to various sites. You don't need to be able to implement it yourself, just see how it's used and that should help illustrate the basic ideas behind it.

The 960Gridder Overlay Tool

As we mentioned before, many websites use grid systems (either directly or indirectly). Luckily, there's an add-on for your browser called 960Gridder which actually overlays a grid on the screen over the site so you can see the alignment of the elements on that site relative to the grid.

Bookmark the 960Gridder tool and use it by visiting a page and then clicking the bookmark link. Check out the pages that were given as examples on the 960 Grid System page and you should see it line up well (also on the 960 Grid System page itself).

Note: The add-on won't work for pages loaded using https!

960 Gridder Overlay


You've just learned about grids from a graphic design perspective. We'll cover their implementation in your mockups in later lessons and their implementation on your sites in a later mini-course.

  • Grids will help you align your content using visually pleasing and well-ordered units.
  • You can design your own grids if you want, but typically you will see 12- or 16-column grids used in web design.
  • Grids are common enough that just about every CSS framework implements them.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Sorry, comments aren't active just yet!

Next Lesson: Understanding Color