Composition Grids in Design

Grids are the underlying structures that provide support and flexibility for designs, just like the skeletal structure in the human body. It's a combination of lines — vertical or intersecting — that divide a page into sections and help organize content. Essentially, grids organize space and information, mapping out a plan for the overall project.^[1]

Besides, grids are a natural part of life, and if you take a look around, you'll notice that we use them to structure just about everything — apartment buildings, bookshelves, streets, and botanical gardens.

Initially, grids appeared in print layout to organize pages in newspapers, magazines, and books. Since then, they have leaked into web design and now help with positioning, sizing, and spacing without the extra hassle. You may assume grids kill creativity, and you can perfectly arrange elements without grids.

So what makes grids so beneficial and crucial for design?

• Grids strive for consistency. In the responsive design era — phones, tablets, laptops, and monitors — grids help create consistent designs that fit any screen. Plus, users can always be sure they would find things where they expect them to be.

• Grids maintain hierarchy and arrange elements in the most logical and intuitive way.

• Grids keep things clear so that nothing distracts users from the content.

Manuscript grids are structurally the simplest types of grids. It usually serves for arranging text on a page and thus can be encountered in books, research papers, essays, or manuscripts, as the name implies. Large margins create asymmetry, which creates visual interest.  

As the name suggests, the column grid consists of columns and gutters — pretty easy, right? Selecting the number of columns is entirely up to you, but traditionally you'll see 12 on desktop, 8 on tablet, and 4 on mobile.

All columns and all gutters are of equal sizes, and as a result, such grids allow for the creation of well-balanced, harmonious compositions.

While the column grid breaks a page down into vertical sections, the modular grid adds a horizontal subdivision. Intersecting columns, rows, and alleys form a matrix of cells — or what designers refer to as modules. In general, modular grids give more control over both alignment and composition.

From an outside perspective, hierarchical grids appear chaotic and don't obey the rules of standard grids. However, those grids rely on agreements inside a design team that dictate the alignment of various elements. For example, designers can agree that the format is divided into sections based on the proportioning of the golden section. They may also decide that the position of a page title may go slightly up or down on different pages to accommodate the background image. Simply put, you create the rules.

A bit of this helter-skelter approach can help create something genuinely phenomenal and non-traditional.

Sometimes, two grids are better than one. In other words, an integrated grid is a combination of two grid types. For example, one can exist for media content and another — for typography. That's a handy tool to create a design beyond anyone's imagination.

Some websites require a more personal approach, and that's when you can break the rules of the grid and create something more adventurous.

For example, you may use a golden rectangle as a proportion for elements. Larger elements will be for images and smaller ones for texts. As long as there's a connection to the golden rectangle, pages will appear harmonious.

You may use a custom grid system on a 45-degree angle and arrange elements wherever you want as long as you stay within this established structure.

Usually, designers experiment with grids on promo or landing pages, breaking a sweat to present a portfolio or specific product in a favorable light.

Despite the range of grid types available, they all share a common structure composed of columns, gutters, and margins. Columns are the vertical sections of the grid, while gutters are the spaces between them that prevent elements and components from different columns from colliding. Margins, on the other hand, define the space to the right and left of the page content. It's essential to note that content should never be placed within the margins of a grid.^[2]

Symmetrical grids use an equal amount of same-sized columns that mirror each other. They also have the same gutter width. In book layouts, symmetrical grids use a one-column grid for one page, which is duplicated on the opposite page.

Simple symmetrical grid structures create a classic and elegant solution. Pages with this type of grid can also appear boring and lack movement.

Asymmetrical grids feel more dynamic and modern. They use differently sized columns that don't mirror each other.

In contrast to fiction books that used classic symmetrical grids, asymmetrical grids were more suitable for books with more complex content, like images, graphs, sidebars, and text blocks. Like symmetrical grids, asymmetrical grids should rely on consistent proportions to maintain harmony on a page. The page may contain various information but appear consistent and clear.