Page Grids

Best Practice · Last modified July 15, 2009

A standardized grid provides a consistent and cohesive user and brand experience with flexibility for the designer to incorporate common and dynamic page elements, as well as different ad sizes, for a large quantity of websites that are created and maintained by many individuals. A defined set of configurations will enable developers to reuse code and easily leverage existing modules.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

Web sites have a need for consistency amongst common page elements, page width, division of space, ad usage and code base.

When to Use This Pattern

  • Creating/managing a large quantity of web pages.
  • Web pages are created by different groups and individuals.

What's the Solution?

Successful web page design often leverages methods rooted in print design by utilizing an underlying grid system.

First, establish a grid, or system of grids, that take into account advertising needs, dynamic elements, and so on.

Next, create templates and code to support designers and developers:

  • For designers, create templates authored in commonly used applications such as Adobe Photoshop and Illustrator. These templates should include details like column and gutter widths.
  • For developers, create a single CSS code template that accommodates page variations (such as number of columns.) Templates should also reflect details such as the gutter widths defined by designers.

    Example: Yahoo CSS Page Grids

Why Use This Pattern?

  • Templates reduce designers' preparation time and let them focus more on the site's content and features.
  • Consistency across pages and page elements contributes to a cohesive brand and user experience.
  • A common source code offers a number benefits:
    • Reduces the number of subtle or major variations in the page layout.
    • Expedites development and global page updates.


  • Having a clean and consistent page structure assists in ease and predictability of navigation.
  • When using CSS for structuring page layout, content may be placed in the HTML file in any order. However, it is important to put the most important content first. Assistive technology will read the content based on physical order and structure. For example, a left navigation menu may be placed at the bottom of the HTML with the main content first. The assistive technology will read the content first. The CSS, however, may place the navigation area visually before the content area.