Different types of grids

There are four main types of grids that are used in design which are called manuscript, column, modular and hierarchal.

Manuscript grids are the simplest structure. They are usually used to present continuous large chunks of text or images. With this type of grid, typography plays an important role in making the document visually appealing.

“The primary structure is defined by large text blocks and margins, which position the block within the format. Its secondary structure defines the location and proportions of folios, footnotes, running headers, and other secondary information”1.

Column grids tend to work well when discontinuous information is presented. For example you may present pull quotes, images, bodies of text etc in different columns to break the content up and make it all easier to digest.

“Columns can be dependent on each other, independent from each other, and crossed over by design elements. This leads to a large amount of flexibility when organising information on the page”1.

Modulated grids use horizontal divisions to break up blocks of content. These grids are good to use when columns don’t seem flexible enough for the content. Image galleries, tables of data and graphs are typically presented in modular grids.

Hierarchical grids are loosely structured and are commonly found on websites. These grids often contain spontaneous design elements alongside more rational structures. In hierarchal grids proportions are typically customised and column widths and the location of flow lines tend to vary. These grids are more creative and they allow you to present information in more eye catching structures.



  1. http://vanseodesign.com/web-design/grid-types/

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s