Every design needs structure, whether it’s created by a beginner or an experienced designer. Structure defines how elements relate to one another, guides the viewer’s attention, and brings individual components together into a cohesive composition. It also influences how people perceive a design and the emotions it evokes.
With 14 years of experience in the design industry, we know that a well-planned grid is one of the foundations of a successful design. Whether you’re creating a website, mobile app, brochure, or flyer, a grid helps organize content, maintain visual consistency, and create a clear hierarchy.
A grid is where the creative process begins.
In this guide, we’ll explain how grid layouts work, how to calculate their dimensions, and how to use a Grid Layout Calculator to build a grid for your next project.
There are many types of grids, each with its own settings and parameters. However, we believe that creating a custom grid is often more useful than relying on predefined layouts. It gives you greater control over the composition and helps you shape the design around your own vision, rather than adapting your ideas to an existing template. It can also bring more originality to designs that might otherwise look similar to countless others found online.
In this guide, we’ll cover the basics of building a grid from scratch and show how to calculate its dimensions step by step. Let’s get started.
Setting Up a 12-Column Grid in Figma
For this example, we’ll use Figma to create two frames, one for desktop (1440px x 1024px) and one for mobile (390px x 844px).
A 12-column grid is a popular choice for desktop layouts because it offers plenty of flexibility. The columns can be combined into groups of 2, 3, 4, or 6, making it easier to organize different content sections, align elements, and build balanced layouts. This makes the 12-column grid a practical starting point for many types of web design.
To add a grid in Figma, select your frame and find the Layout guide section in the right-hand properties panel. Click the “+” icon to add a new grid. We’ll start by configuring the desktop layout, then move on to the mobile version.
Next, we can see the grid settings panel. We already know that we’ll be using 12 columns, but what about the gutter width, column width, and side margins?
A useful principle to keep in mind is the Gestalt law of proximity. Elements placed closer together tend to be perceived as more closely related. That’s why the side margins are usually wider than the gutters, the spaces between columns. Wider outer margins help define the content area, while narrower gutters keep the columns visually connected.
There are no strict values you must follow. You can adjust these settings to suit your canvas size and design goals. The important thing is to maintain a clear, noticeable difference between the outer margins and the inner gutters.
To get a clearer picture of the layout and calculate the grid dimensions accurately, we usually use a Grid Calculator Tool. It helps determine the column width , gutter size, and outer margins based on the canvas dimensions and the number of columns.
Set the number of columns to 12, the maximum container width to 1440 px, the gutter width to 24 px, and the side margins to 60 px. As you can see, the grid is calculated accurately, with consistent column widths.
Before transferring these values to Figma, there’s one more useful feature worth mentioning. The calculator can validate the grid dimensions and detect when the columns are not all the same width. This is especially important when building a pixel-perfect layout, where even small inconsistencies can affect alignment.
If the dimensions don’t add up correctly, the Page Width field will turn red, indicating that the grid values need to be adjusted.
Once we’ve calculated the grid dimensions, we can transfer the values to Figma and apply them to our desktop frame.
For the mobile layout, we can follow the same process, using either four or five columns. Mobile screens usually have simpler layouts and less space to work with, so a four-column grid is often enough to organize the content.
For this example, we’ve used four columns with 16 px side margins and a 10 px gutter. This provides a simple, flexible structure for arranging content on smaller screens.
Grids in UI Components
We’ve built our grid, and we could stop here. However, grids are not limited to structuring entire pages. They also play an important role in organizing individual UI components and the content inside them.
Dashboards are a good example. Grids help arrange cards, charts, tables, financial reports, statistics, navigation panels, and other interface elements into a clear, consistent layout.
Let’s take bar charts as an example. They are commonly used to visualize data, making information easier to understand and compare at a glance.
As we can see, each card has its own internal structure and visual hierarchy. The spacing between the title, labels, chart bars, and other elements helps keep the information organized. This is where different grid systems work together: the main grid structures the page, while smaller grids organize individual components.
The calculation process follows the same principles. First, define the container area, then calculate the width of the columns, the spacing between them, and the outer margins. Once these values are established, you can transfer them into your design and build a chart that feels consistent with the rest of the interface.
A good grid is more than a set of guides. It helps create visual order, maintain consistency, and make complex layouts easier to understand. Whether you’re designing a website, a mobile app, or a dashboard, a well-structured layout gives you a reliable starting point for the creative process.
