When designing a website, we don't place content, modules, and text whenever we want. Websites such as these may look more like a cubist painting than a functional site. Website designs should be simple, usable, and approachable. A way to maintain order throughout a website is to base templates and pages off a grid system. The grid system is comprised of columns, typically in the range of 10-16 on large screens. Elements on a template are then aligned with the edges of the columns to bring order to the page.

Between each red column, there is space called the gutter. By always keeping this same sized space empty between elements, the page has breathing room and white space. The famous shoe brand, Vans, implements a 12-column grid system.

The Vans' website (http://www.vans.com/) with an example grid system

On Vans' home page, different sections of the page line up with the grid. The carousel spans the full width of the grid system, taking up 12 columns. The featured shoes underneath only take up two columns each. The articles under the OFF THE WALL section spans three columns each. Even the BE ORIGINAL banner at the bottom of the site lies on the grid. We see not only each section lined up with the grid system, but the images and text within each as well.

We don't have to create these grids from scratch though. Back when websites were acceptably one size and static, a popular tool to create these grid systems was 960 Grid System (http://960.gs/). This tool provides grid overlays in Photoshop, Flash, Fireworks, Illustrator, and many others. Each overlay is a 12, 16, or 24-column grid system with a 960-pixel width. Along with each column version, 960 Grid System also provides all the CSS needed to have page elements span across a certain number of columns.

We are not designing websites that are only 960-pixel wide. For a responsive website, we can use a responsive grid system. The patterns reviewed in this book can all be applied projects using a responsive grid system. Grid systems can help you determine how wide a pattern should span. With a responsive grid system, even though every column should be the same size, this one size can be a percentage and scale. This means that, on smaller screens, each column's width is narrower. Also with media queries, columns can be dropped too. A 12-column layout can become a 6-column one on smaller devices. Determining how a responsive grid system scales down for a project can help figure out how the project's patterns scale down too.

There are again tools already out there that help us create these responsive grid systems. Gridpak (http://gridpak.com/) lets us create a responsive grid system right there in the browser. By default, each column, column padding, and gutter value is a percentage. This allows the system to scale up and down depending on the browser's size. We can even add breakpoints to the system and change each value. When we download the file, Gridpak provides a .png file for design and the CSS files for implementation.