Grid

Select CSS:

What It Is

Related Links

Grid systems have long been a staple of print media, providing a consistent visual scaffolding or framework from which to build up complex and visually appealing page layouts. As noted on the Yahoo Pattern Library:

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.

When to Use

The grid is a fundamental building block for creating Allianz-branded application pages. As such, other page elements have been designed with the grid tightly integrated into their defined CSS classes. This frees the designer for the most part from having to consider the grid when designing individual web pages.

Additional Notes

As the grid is so foundational to the Allianz standard, it is built into the various page-level patterns in a way that is largely transparent to the designer. One notable exception to this is in the layout of multi-column tables, where the designer should make a conscious effort to align table columns where possible so that as many as possible terminate on one of the major grid lines. This is discussed in greater detail in the table pattern description.