On the Grid: Brief Overview of Grid-based Web Design

960 web grid

960 Grid from 960.gs

The Basics:

A grid-based layout includes vertical and horizontal sections that make use of columns, gutters, and margins to create a framework for designing and organizing content.

“A grid at its barest is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal.”

Chris Brauckmuller

Grids are the basic foundation for laying out a website in a clean, organized way.  Just like in print design, grids can help the designer create a balanced “composition” that promotes readability while maintaining interest and appeal.  Using grids should simplify workflow, while maintaining the quality of design.  Paraphrasing (and re-wording here and there) from Naldz Graphics’s explanation of why grids are used for web design:

  1. Plan Layout: You can quickly build a simple or advanced structure using a grid foundation.
  2. Balance: The visual weight of the content can even out by balancing placement across the grid.
  3. Good Structure: Create visual impact with rhythm, which can improve readability and usability.
  4. Improve Site Impression: A clean, organized look can appear more professional and build trust in the eyes of the users.
  5. Synergy in Design Process: Having a foundation can help the designer organize and arrange content while gradually building up a strong design simultaneously to create cohesion.
  6. Guide:  The grid helps the designer in placement and alignment of objects and content with ease and relative speed.
  7. More Appealing: Using the grid, the designer can easily break up a page placing more weight on certain elements, while maintaining unity and harmony throughout all elements.
  8. Typographic Integrity: You can easily create a hierarchy of type by balancing headers, banners, navigation, and body copy, so that users can navigate more easily.
  9. Uniformity and Consistency: Grid-like designs can be easier to look at and quicker to read and decipher, which can increase website traffic.
  10. White Space: The designer can add areas of white space to create movement and emphasis on the page for a dramatic effect.

web grid

A Closer Look:

You can build your own grid, or use one of the many frameworks available online (either way, you still might need to keep your calculator handy!).  Some popular CSS grid frameworks:

960 grid

960 Grid System: Create a grid based on a width of 960 pixels based on a structure of 12 or 16 columns.

blueprint website

Blueprint: A CSS framework, which aims to cut down on your development time by providing an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

columnal website

Columnal: An 1,140-pixel wide grid design that allows for the widening and shrinking of browsers in responsive design. The “elastic” grid contains columns and sub-columns to optimize sites at almost even width, including mobile.

foundation website

Foundation: A framework that makes setting up a new site easier by providing a responsive grid, cross-browser CSS, and good-looking default settings for various page elements.

There are dozens of other frameworks available.  To view more framework options, visit Spyrestudios and the resource websites at the end of this post.  For an overview of some popular responsive CSS frameworks, view this Design Shack article.

On the Horizon:

Accommodating one of the biggest trends in web design, a grid structure can facilitate responsive web design.  Using ratios and formulas (or tools that help with the calculations!), you can figure out the correct proportions for varying screen sizes while maintaining the integrity of the design.  The process is simplified by developing one website with the grid structure foundation (using percentages for column widths and media queries to control how the layout adjusts) to accommodate various screen sizes.

There is so much information out there about grids for web that it’s a little overwhelming!  If you have a few minutes (err, hours), here are some pared-down resources I found for information and inspiration:

Grid-Based Web Design, Simplified by Chris Brauckmuller

Ultimate Guide to Grid-Based Web Design: Techniques and Tools by Cameron Chapman

Tips & Tools for Grid-based Layouts by Carrie Cousins

A Brief Look at Grid-Based Layouts in Web Design by Shannon Noack

10 Shining Examples of Grid Based Web Design and Best Practices by Oleg Mokhov

35 Inspirational Grid Based Website Designs by Igor Ovsyannykov


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s