World Library  
Flag as Inappropriate
Email this Article

Grid (graphic design)

Article Id: WHEBN0002051587
Reproduction Date:

Title: Grid (graphic design)  
Author: World Heritage Encyclopedia
Language: English
Subject: Graphic design, CSS frameworks, Page layout, Page (paper), Communication design
Collection: Communication Design, Css Frameworks, Graphic Design, Page Layout, Typography
Publisher: World Heritage Encyclopedia

Grid (graphic design)

A page layout grid (shown in white lines) composed of a series of intersecting vertical and horizontal grid lines. The text (content) is not part of the grid. The text content is applied to a particular page using the grid "flush left" along the bottom sides and right-hand sides of grid lines. The same grid may be applied to multiple pages using different types of content or different styles of the same content type.
A grid applied within an image (instead of a page) using additional angular lines to guide proportions.

In shape.

The less common printing term “reference grid,” is an unrelated system with roots in the early days of printing.


  • History 1
    • Antecedents 1.1
    • Evolution of the modern grid 1.2
    • Reaction and reassessment 1.3
    • Grid use in web design 1.4
  • References 2
  • External links 3



Before the invention of movable type a system based on optimal proportions had been used to arrange handwritten text on pages. One such system, known as the Villard Diagram, was in use at least since medieval times.[1]

Evolution of the modern grid

After World War II, a number of International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.

Reaction and reassessment

By the mid-1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.

Grid use in web design

While grid systems have seen significant use in print media, interest from web developers has only recently seen a resurgence. Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements with pixels, and some are 'fluid', meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.[2]

Some examples of grid system frameworks are:

There are also CSS frameworks that include their own grid system:


  1. ^
  2. ^ Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  • Baines, Phil and Haslam, Andrew. Type & Typography, second edition. New York: Waston-Guptill Publications, 2005. ISBN 0-8230-5528-0.
  • Burnhill, Peter. Type spaces: in house norms in the typography of Aldus Manutius. London: Hyphen Press, 2003. p. 101.
  • Elam, Kimberly. Grid Systems: Principles of Organizing Type. New York: Princeton Architectural Press, 2004. ISBN 1-56898-465-0.
  • Hochuli, Jost. Designing Books: Practice and Theory.
  • Hurlburt, Allen. Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books. Wiley: 1982. ISBN 0-471-28923-X.
  • Le Corbusier The Modular I.
  • Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli: 1996. ISBN 3-7212-0145-0
  • Ruder, Emil. Typography. Hastings House: 1981. ISBN 0-8038-7223-2.
  • Rudolf Bosshard, Hans. The Typographic Grid. Niggli: 2002. ISBN 3-7212-0340-2.
  • Khoi Vinh, Oh Yeeaah! Grids are good, South by Southwest Conference Presentation, 2007. [2]
  • Antonio Carusone, Designing Grid Systems For Flash.[3]
  • Marcotte, Ethan (March 3, 2009). "Fluid Grids".
  • Capo, Daniele (April 5, 2009). "Dividing a segment in n parts in a medieval, yet late-modern, fashion." [4]

External links

  • The Grid System Looking at the technical aspect of grids in practice, with many resources.
This article was sourced from Creative Commons Attribution-ShareAlike License; additional terms may apply. World Heritage Encyclopedia content is assembled from numerous content providers, Open Access Publishing, and in compliance with The Fair Access to Science and Technology Research Act (FASTR), Wikimedia Foundation, Inc., Public Library of Science, The Encyclopedia of Life, Open Book Publishers (OBP), PubMed, U.S. National Library of Medicine, National Center for Biotechnology Information, U.S. National Library of Medicine, National Institutes of Health (NIH), U.S. Department of Health & Human Services, and, which sources content from all federal, state, local, tribal, and territorial government publication portals (.gov, .mil, .edu). Funding for and content contributors is made possible from the U.S. Congress, E-Government Act of 2002.
Crowd sourced content that is contributed to World Heritage Encyclopedia is peer reviewed and edited by our editorial staff to ensure quality scholarly research articles.
By using this site, you agree to the Terms of Use and Privacy Policy. World Heritage Encyclopedia™ is a registered trademark of the World Public Library Association, a non-profit organization.

Copyright © World Library Foundation. All rights reserved. eBooks from World Library are sponsored by the World Library Foundation,
a 501c(4) Member's Support Non-Profit Organization, and is NOT affiliated with any governmental agency or department.