Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Digital Grids

All of the principles of print grids also apply to how we think about translating grids to a digital environment. There are several types of grids that will help us create a wide variety of digital layouts that aid us in achieving consistency and visual hierarchy.

Responsive Column Grid

In web design, the column grid is often the place to start.

A grid is composed of 3 primary components that include columns, gutters, and margins.


Columns are the imaginary vertical blocks and are used to align the content. We define column widths either in percentage (%) or fixed values.

Recommended grid for desktop design is 12 column-grid. 12 is easily divided by 2, 6, 3 and 4, which means it provides a great deal of flexibility in creating wide variety of column layouts.


Gutters are the spaces between the columns. Gutters help to separate the content. We define gutter widths as fixed values. It is recommended to set a 20px gutter for desktop designs.


Margins are the space between content and the edges of the screen. We define side margin widths as fixed values that decide the minimum breathing space across every screen size.

Side margins should be even on both the left and right side. The size of the margins should be largest on desktop. We recommend adding up the size of one column and a gutter.

For mobile and tablet, the size of side margins can be scaled down. For tablet, recommend around 60px on each side. For mobile, we recommend between 20-30px on each side.

Hierarchical Grid

Hierarchical grids are mostly used in web design. The purpose of a hierarchical grid design is to organize elements in order of importance. It is still called a grid because the modules are still set up inside a measured manuscript grid.

In their move to digital platforms, newspapers moved from the usual symmetric column grids to hierarchy grids with columns inside the spatial zones.

Hierarchy is a condition in which elements are set up in order of importance. The word comes from the concept of royalty: the king and queen are first, then the prince and princess, then the dukes and so forth. Web designers use hierarchy to make sure the most important information is seen first. Call to actions and special notices are the first to stand out.

Baseline Grid

In typography, baseline is an imagery line that letters rests on. Aligning a baseline to a specific absolutely grid establishes a vertical rhythm – a pattern that is easier for human brain to scan and is especially useful for multi-column content.

Depending on the size of your canvas, you can choose to set up different absolutely grids. Column absolute grid sizes include 4px grid, 8px grid and 10px grid.

Base on the size of your typography, you can use the absolute to align the baseline of your typography. This practice helps you determine an optimal line height and create a better reading experience for users.

In Figma, this is how to set up an 8px baseline grid and align typography to determine optimal line height.


To wrap up, let’s talk about best practices for using grids.

Best Practices For Using Grids

1. Don’t just design with a grid-design the grid

When opening up a new document to design a publication or website, it’s tempting to start with your “usual” grid-perhaps a number of columns you’re used to, or a gutter width you always use.

But it’s worth staying on paper, and taking the time to work out what kind of grid your project actually needs. This can save you getting locked into a grid that doesn’t actually work for the thing you’re working on.

2. Always begin and end elements in a grid field-not in the gutter

The gutter-the empty space between columns-should be used to separate elements. Text and graphics can span multiple columns, of course-but they should begin and end at the edge of a column, not in the gutter.

Scroll to Top