grids layout design

Grids and Layout Design

1. Definition of Grids

Grids are the network of lines or bars combined to form a unit or cell. The major advertising media design we see today adopts a grid-based approach using this concept to tie together content within each segment of a page in a given container.

Elements of grid system of flow

2. Importance of Grids

  • Grids are useful for defining key alignments and intersecting points within a composition and is a great component of design process.
  • They provide a means of organizing and determining where to place graphic elements, imagery, and texts.
  • It offers a designer a means of making visually efficient structured decisions to establish a consistency in layout design.

3. Grid Components

3.1. Margins

Margins are the areas of negative space between the edges and content on the page.

3.1.1 Characteristics

  • They define the live area and allow the designer to focus on the viewer ’s attention.
  • Separate subordinate information such as running heads or folios.
  • Negative space between edges of the page and the content on the page.
  • What’s more is, margins control the horizontal and vertical whitespace around elements.

3.2. Gutters

They are empty spaces between units and columns. When units are combined together to form a column, a little ventilation appears between them.

3.2.1. Characteristics

  • It prevents element within the column from bumping up against the column edges.
  • It creates ventilation between two units when combined together.

3.3. Flow-lines

These are the standard alignments that guide the viewer across the page.

3.4. Columns

Columns are vertical containers that create divisions in the live area to hold content. They vary in width to accommodate specific information.

3.5. Modules

Modules are the individual units of space separated by standard intervals.

3.5.1. Characteristics

  • The module creates a recurring series of columns and rows when repeated across a page.

3.6. Spatial Zones

Spatial zones are distinct areas formed by combining groups of modules to create regular and specific areas that contain any type of content.

4.0 Types of Grids

In the advertising design ecosystem, grid plays an important role in terms of consistency, the organization of contents and structuring without obscuring content.

4.1. Single Column Grid

A single column or manuscript grids is the most popular form of grids characterized with static nature of content laid out within the defined containing block.

Manuscript grid


4.1.1. The Pros

  • The position of the page elements such as headers, footers, folios, and chapter heads add a passive and staid composition feel.

4.1.2. The Cons

  • It lacks visual appeal and stimulation that keeps the reader’s eye from being visually engaged leading to lost of focus while reading.
  • Margins are affected by hanging numbers or punctuation and indents.

4.1.3. How to Work With Manuscript Grid

  • Make the margin of the page wider to generate a feel of stability, as opposed to a narrow margin that creates tension.
  • Use a mathematical ratio to generate a sense of direction and movement for the reader, doing this will create a harmonic balance between the live area and the page.
  • Combine typographic elements and large images to spice up the page for reading.

4.2. Multi-Column Grids


A multi-column grid is a flexible structure with varying widths.  When contents consist of a large range of types in a material, the best way to organize and standardize the communication between these elements is by implementing a multi-column grid.


Multi-Column Grids

4.2.1. Multi-column Grids Features

  • It can accommodate multiple tiers of content
  • Its width can be ventilated with the aid of the gutter to create varying column grids.
  • A hang line plays a crucial role when setting up a multi-column grid layout
  • It is a vertical alignment that creates a horizontal division between two margins.
  • It leaves behind a contemporary and technical feel to advertising materials.
  • Great for web design and material design.

4.3. Modular Grid

A modular grid is synonymous to the stacking of different or equally sized column grids within a container in a row. The combination of columns and rows creates a series of small contents areas called modules or box.

modular grids

4.3.1. Features of Modular Grids

  • Different or equally sized columns can be combined together in a row making the consumption of information quick and easy to digest by the readers.
  • Useful for complex projects that contain a lot of components of varying sizes such as newspapers and political magazines.
  • Allows the designer to accommodate multiple types of content and still maintain consistency and feel of unification.
  • Great for material design.

4.4. Hierarchical Grids

A hierarchical grid is a formation of row-column with varying height and irregular structuring.

hierarchical grids

4.4.1. Features

  • Creates specific alignments within the material as a method of developing a hierarchy of information.
  • Best suited for packaging, posters, and websites design because they rely on an intuitive placement based on specific content.
  • It provides a feeling of order and helps navigate the viewer through the information to be presented in a more organic way as opposed a modular grid.
  • It is a useful way to organize contents into different content areas.

hierarchical grids flyer

The entire work-flow of design and the message it communicates solely depend on the layout and grid elements. The mutual relationship between these two element makes contents in magazine, posters, and postcards  readable.  

    Leave Your Comment Here

    50% Off Today!

    Creative Logo, Flyers, Business Cards and Catalog for Your Business. We Are Here to Help.
    Hurry up! and subscribe with your email to get your coupon today.
    Have a Website?
    And Need a Redesign
     Let's Talk by Droping Your Email With Us!

    Need A Creative Design?

    Sign up with your email address to receive latest design offers
    Customer Satisfaction Guarantee!
    Click Me
    error: Content is protected !!