The Basic Grid System in Graphic Design

Learning  Descriptions:

Grid is a system used to organize the underlying composition in art and design. In graphic design, the layouts that are based on a grid system are applied to many applications from printing (like a book, magazine, or poster), or for screen (like a webpage, app, or other user interfaces).

There are a lot of different types of grids, and they all serve different purposes. The grid system in design serves as a fundamental structure for arranging design elements, and it is also embedded with the design principles or philosophies of the designers. For example, designers often follow, break, or mix the rules of using grid to achieve different design voices or styles, whether aesthetically or provocatively.  

Having a fundamental understanding of the grid system can help everyone in everyday life, from simple flyers to online website layouts. The grid system can be applied to help improve designs and increase the effectiveness of visual communication. The grid system is simple to learn but it has a profound meaning in practice. 

Learning Objectives:

The purpose of this learning project is to give fundamental knowledge to learners in applying the grid system in graphic design in everyday applications; to provide a basic design education to improve the learners’ understanding of applied design aesthetics. At end of this class, the learners should be able to:

1. Identify what is the grid system in graphic design.

2. Understand the main purpose of using different grid systems in graphic design layouts. 

3. Be able to apply the grid system in a design application and able to rationalize the reasons for using it. 


We may not see the grid every day, but we do see designs everywhere. How do you think the posters, flyers, or magazines we see every day are designed? The graphic designers don’t just put the images and texts together and call them designs, there is always a fundamental layout underneath each design that is often based on a grid system. 

Watch video: 

Why You Should Use a Grid for Designing Layouts

Design principles: Grid systems & alignment

Two main approaches to use the grid system:

The Modern Grid System: The modern grid system is based on the concept of logic and order and rationality. Led by the Avant-Garde modernist movement such as   BauhausDe Stijl to the established Swiss Style. The modern grid system is based on the geometric forms in square, rectangle and sometimes combined with triangles and circles.  The modern grid system is widely applied in many areas such as corporate designs, magazine layouts, web designs.

The disruptive grid system: In rebellion to the clean, logical modern grid system, a design concept challenges the conventional use of the grid system. From the 1970s until today, artists and designers intentionally break the grid system to express a new approach in design culture, especially in music, subculture-related designs to bring in new visual expressions. Nowadays, it is widely accepted in mainstream design as an alternative design style.

Therefore, using a grid system does not just create an aesthetically pleasing design, but also, communicates messages in visual expression. Choosing the appropriate grid system in connection with its context, it can give us a great advantage for making the design more appealing and effective.

 “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

—Josef Müller-Brockmann

Further reading: 

Grids In Graphic Design: A Quick History, and 5 Amazing Tips.

Class Activity:

sketch a layout with the graphic design sample

Discussion forum:

Post your sketch and discussion here.