Free · 8 min read
Modular grid in design: what it is and how to build one in Figma
What a modular grid is: columns, rows, gutters and margins. How to spot grids in other designs, build one in Figma and adapt it to any screen.
- How a modular grid differs from a column grid
- How to build a modular grid in Figma
- How to carry a grid from desktop to phone
- Free
- 1,504 members
- Join in 1 click
Five steps to your first modular grid
- 1
Step 1
Learn the parts of a grid
- 2
Step 2
Find the grid in other people's designs
- 3
Step 3
Build a modular grid in Figma
- 4
Step 4
Lay content out in modules
- 5
Step 5
Adapt the grid to different screens
- 1,504
- community members
- 8,915
- messages with questions since July 2024
- 9
- design games since September 2024
- 759
- people wrote in the chat
This guide is for you if you
Align things by eye
The blocks look straight enough, but the layout still feels messy and you can't tell why.
Have heard about 12 columns
You know you "need a grid" but not how to choose the number of columns, margins and gutters.
Are designing a website or catalog
You need to lay out lots of cards, photos and text so that it reads well on every screen.
In short
- A grid is a structure of columns, the gutters between them and the margins at the edges that elements are aligned to.
- A modular grid adds rows to the columns: their intersections form modules, and content takes up one or more modules.
- Modular grids work well for catalogs, galleries and listing pages, wherever blocks repeat.
- In Figma you build a grid with layout guides: columns and rows in the same frame give you a modular grid.
- The number of columns changes with the screen: for example, 4 on a phone and 12 on a desktop.
Five steps to your first modular grid
- 1
Step 1
Learn the parts of a grid
As Nielsen Norman Group defines it, a grid has three parts: columns, where content goes; gutters, the space between columns; and margins, the empty areas at the left and right edges where there's no content. NN/g describes three common grid types in interfaces:
- column grid: the page is divided into vertical columns, and elements align to them;
- modular grid: rows are added to the columns, and their intersections form modules; it suits ecommerce and listing pages where rows repeat;
- hierarchical grid: the most important content takes the largest parts of the grid, like a news site's home page.
💡 A modular grid isn't a separate "style" but an extension of the column grid. If you can work with columns, modules are one step away: add rows.
- 2
Step 2
Find the grid in other people's designs
Before building your own grid, learn to see other people's. Take screenshots of three pages: an online shop, a news site and a portfolio platform such as Behance. Paste them into Figma, place a semi-transparent frame on top and find:
- how many columns one product card takes and how many cards fit in a row;
- whether the gaps between cards are the same horizontally and vertically;
- where the page margins are and whether they match on the left and right;
- which elements deliberately break the grid, such as full-width photos.
💡 An exercise: take apart one page at a time and write down the number of columns and the gutter and margin widths. Over time grids get easier to spot, even without overlays.
Show your grid
From the outside it's easier to see where modules drift or margins don't match. Post your page with the guides on in the community and ask what breaks the rhythm. It's free.
Get feedback on my gridFree. 1,504 designers are already in the community.
- 3
Step 3
Build a modular grid in Figma
In Figma you set up a grid with a layout guide (until May 2025 this feature was called layout grid). Create a 1440 px wide frame, click Add layout guide in the right sidebar and change its type. There are three types: Uniform grid (a square grid), Columns and Rows. A modular grid needs two guides in one frame:
- Columns: Count 12, type Stretch, set the Margin and Gutter, for example 80 and 24 px;
- Rows: add a second guide with rows, so columns and rows form modules;
- Stretch makes columns resize with the frame, while Left, Center or Right fix the column width and anchor the grid to an edge or the center;
- show or hide all guides in the file: Shift + G.
💡 By default guides are red at 10% opacity. If they blend into your design, change the color or opacity in the guide settings.
- 4
Step 4
Lay content out in modules
Now build a catalog page on this grid: a header, a row of filters and product cards. Each element takes a whole number of modules: a card is three columns by one row, a promo banner six columns by two rows. Make sure the edges of text, photos and buttons fall on column lines.
- use spacing inside cards and between text blocks based on one unit; Figma describes the popular 8-point grid as either "hard" (a Uniform grid of size 8) or "soft" (distances divisible by 8);
- a large element spanning several modules creates emphasis, while equal modules create rhythm;
- deliberately breaking the grid is a technique, not a mistake, if it happens once and is noticeable.
💡 A grid made of layout guides only shows guidelines. To have cards arrange themselves in columns and rows, use Grid in auto layout: it's a separate feature that actually controls the layout.
Got a grid but no order? Show your layout to the community → - 5
Step 5
Adapt the grid to different screens
One grid doesn't work for every screen. NN/g gives the example of 4 columns on a phone and 12 on a desktop; wider gutters suit larger screens and narrower ones suit smaller screens. For Android, Google's developer docs divide window width into classes: compact is under 600dp, medium 600 to 840dp, expanded 840 to 1200dp, with large and extra-large for even wider windows. Make three versions of the catalog page:
- phone (for example, 375 px): 4 columns, a card full width or two columns wide;
- tablet (for example, 768 px): 8 columns, two or three cards per row;
- desktop (1440 px): 12 columns, four cards per row;
- save each grid as a layout guide style so you can apply it to new frames in one click.
💡 Put the three versions side by side and share them in the community with the question: "Can you tell this is the same page?" If yes, the grid is doing its job.
You're not alone with these questions
We counted what people ask about most in our community. Learning and Figma are among the leaders, and the grid is one of the basics worth starting with.
Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.
Practice with a deadline and live feedback
The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.
Design game · January 2026
NAOMA website redesign
The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.
AI challenge · May 2025
A landing page made by AI
Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.
Workshop · April 2026
Figmosha: AI in Figma
The tool's author showed how to generate interfaces in Figma and analyze a design system.
Free. 1,504 designers are already in the community.
How to join: 1 minute
- 1
Tap the button
Telegram opens with the Spaceberry community.
- 2
Join
It's free: all you need is a Telegram account.
- 3
Introduce yourself
Say where you're starting from and ask your first question.
Questions and answers
Didn't find your answer? Ask it in the community.
How is a modular grid different from a column grid?
A column grid divides the page only into vertical columns. A modular grid adds horizontal rows, and the intersections of columns and rows form modules. That makes it handy for pages where identical blocks repeat: catalogs, galleries, lists. In essence, a modular grid is a column grid with rows added, so in Figma you can build it from two layout guides.
How many columns should I use?
There's no universal answer. Desktop websites often use 12 columns because they divide easily into 2, 3, 4 and 6 parts. Phones use fewer, for example 4. What matters is that your content fits the grid comfortably, not the other way round.
What is an 8-point grid?
It's an approach where sizes and distances in a layout are multiples of 8. As Figma describes it, there are two ways to apply it: "hard", with a square grid of size 8, or "soft", where the distances between objects are divisible by 8. For a beginner it's a simple way to stop inventing spacing every time: 8, 16, 24, 32 and so on. The spacing rhythm becomes consistent, and the layout looks tidier even without a complex grid.
Are layout guides and Grid in auto layout the same thing?
No. Layout guides are visual guidelines you align elements to. Grid in auto layout actually arranges a frame's content in columns and rows and rearranges it when the size changes. You can combine them: guides for the overall page grid, Grid for a grid of cards.
Is the Spaceberry community paid?
No. Spaceberry Community is free: it's supported by Spaceberry Foundation, a non-profit public organization. All you need to join is a Telegram account. The community has 1,504 designers, and Figma and learning are among its top topics. People share layouts for feedback, help spot where modules drift and take part in design games with the same brief and a deadline. Most conversations are in Ukrainian.
Grid ready? Test it on people
Join 1,504 designers who learn, share their work and play design games. Show your page on its grid and get feedback. The community talks in Ukrainian.
- Free
- 1,504 members
- Join in 1 click