Module and grid explained
A modular grid is a tool that helps to make a layout. It consists of simple geometric shapes – modules of the same size, located in a certain sequence. The grid allows you to split the layout into equal cells – modules and adjust all the indents and sizes of each object so that they are a multiple of the module size.
Such a system simplifies the work of designers: it helps to make the layout proportional, understandable, and harmonious and not spend a lot of time. It’s a powerful instrument that gives invisible (or sometimes visible) structure to the layouts and is widely used in website design, poster and book design, newspapers and magazines.
Where can I use grid?
Anywhere! Honestly, there are no limits for use of the grid. Modern printed newspapers, magazines, and catalogues are usually laid out on a grid, as they have a template structure – all pages follow the same rules. The same applies to product packaging, labels and leaflets.
Sometimes a modular grid is included in the company’s corporate identity: on leaflets, banners, and promotional materials, the elements are arranged in the same way, and this works for brand recognition. Also, a modular grid can be used when creating a logotype. And of course, it’s widely used in website and interface design.
Is it possible to create a good layout without a grid? Of course, it is! But usage of a modular grid saves time and brings order and consistency to the content.
The module is a small structural element of the grid. The modules combined with a certain order and spacing create a modular grid. Modules can be merged in groups, and this gives you a variety of sizes and shapes for the elements that you use
Rows, columns, and gutter
Vertical and horizontal lines of organized modules create rows and columns. A gutter, also known as a grid gap, is the space between columns that help separate content.
Margins are the empty space between the format and content edges. Margin size is what gives the content its overall shape, usually rectangular.
The base grid is a dense grid of evenly spaced horizontal lines that define where the text will appear. Base grids are often used in conjunction with column grids to ensure that lines of text in each column align evenly throughout the spread. A simple example of a basic grid is the lined paper you probably used in school!
It’s a one-column grid that simply determines where the text will appear on the page. Classic, “traditional” books use a manuscript grid, with page spreads facing each other. If you open Microsoft Word, the default document will use a manuscript grid.
This is the most common type of grid used by graphic and web designers. It involves taking a page and dividing it into multiple vertical spaces that objects are then aligned to. Newspapers and magazines make extensive use of column grids.
As an extension of the column grid, the modular grid includes the column grid and adds rows to it. Intersecting rows and columns create “modules” that can then be used to drive layout decisions. Magazines and corporate reports often use modular grids.
A note to history
Modular grids in graphic design became widespread in the post-war years in Switzerland. Followers of the Swiss or International Style have developed a grid system to organise the composition of layouts.
One of the brightest representatives of the school is Josef Müller-Brockmann, the author of one of the most famous books on grids called Grid Systems in Graphic Design. An excellent book for those who would like to delve into the history and theory of grids.
“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.”