How to Make a Grid in Figma: Step-by-Step Process

“Making a grid in Figma means picking between a layout guide and the Grid mode inside auto layout, renamed since May 2025.”

Two separate features in Figma get called a grid. One draws reference lines on the canvas that nothing snaps into. The other is a real container that holds layers and moves them when the frame changes. Confusing the two is how people end up rebuilding a screen.

A layout guide overlays alignment lines. A structural auto layout container holds and reflows content across rows and columns, and that difference decides everything else about how it behaves.

Both live inside Figma, the browser based interface tool that stopped being a designers-only product a while ago. Figma reported more than 13 million monthly active users for the three months ended March 31, 2025, two thirds of them working outside a traditional design role, according to the company’s S-1 registration statement filed with the SEC in 2025.

What Is a Grid in Figma?

Attach one to a frame and it keeps objects lined up while a design comes together. That’s the whole job.

The trouble is the vocabulary. Two features share the same word:

• A layout guide overlays reference lines and stops there
• Grid auto layout holds real layers and reflows them when the frame resizes

Only the second one works like a grid system in the CSS sense, since it positions content instead of just marking space.

Figma renamed its original “layout grid” feature to “layout guide” in May 2025, which is why older tutorials use words that no longer match the sidebar (Figma).

Either version needs a frame to live on. Groups, components and plain shapes can’t carry one, so a file starting from scratch needs the frame set up before any of this matters.

Layout Guide vs Grid Auto Layout: What Is the Difference?

One is scaffolding for the designer’s eye. The other is part of the design itself, and it reaches developers as code.

Layout guides have been on every plan for years and barely changed, aside from that 2025 rename.

Grid auto layout is the new one. Figma shipped it as an option inside auto layout at Config 2025 in May 2025. A December 2025 update added Hug sizing and fractional units, letting tracks resize with their content, and the feature left beta to become generally available in May 2026, when Figma added drag-to-reorder for columns and rows plus automatic row creation and removal (Figma).

Handoff is where the gap gets obvious. A layout guide contributes nothing to the exported file. Grid auto layout properties show up in the Dev Mode inspector as CSS Grid syntax a developer can copy.

How to Add a Grid to a Frame in Figma

Assuming a frame already exists, this takes about ten seconds.

1. Select the frame you want to align, since a guide can’t attach to a group or a single layer
2. Open the Layout guide section in the right sidebar Design panel and click the plus icon
3. Choose a grid type from the dropdown: uniform grid, columns, or rows
4. Set the count, size, or gutter, then adjust color and opacity if the default red is too loud

Visibility is a separate control from all of that. Shift and G shows or hides every guide on the canvas at once, and it’s worth committing to muscle memory the moment a file has more than one guide stacked on the same frame (the rest live in Figma’s full shortcut list).

Turning guides off for a client review is a different setting though. That one lives in the file preferences, covered in the piece on hiding the grid across a whole file.

Layout Guide Types in Figma

The dropdown offers uniform grid, columns and rows. Each one behaves differently once it lands on a frame.

Uniform Grid

Squares, sized in pixels rather than counted in columns. Every square scales off a single Size value, which is what keeps an icon set from drifting a pixel here and a pixel there across a file.

Color and opacity are the only other controls, because there’s no count or gutter to argue about.

Columns

Vertical guides running the full height of the frame, with left, center, right, or stretch alignment.

• Count and gutter both apply, and count accepts either a fixed number or a bound variable
• Most component libraries default to this type
• It sits happily alongside a row guide on the same frame

Columns exist for responsive design work, where content has to reflow across several screen widths.

Rows

Same idea turned sideways. Rows span the frame’s full width instead of its height, and the alignment options change to match: top, center, bottom, or stretch.

Dashboards and long content pages lean on rows far more than marketing pages do.

Layout Guide Settings You Can Customize

Once a column or row guide is on a frame, the sidebar gives you a handful of fields:

• Count, the number of columns or rows, typed in directly or bound to a variable
• Gutter, the space between each column or row
• Margin, the outer padding between the frame edge and the guide
• Color and opacity, which only affect how loud the lines look on canvas

Every field has a default, and most people never touch anything except color, usually because the brand kit uses red for something else.

Numbers worth knowing:

• Default guide color: red, hex FF0000 (Figma)
• Default opacity: 10% (Figma)
• A 10pt uniform grid produces 100 square pixels per cell (Figma)

Count is the one field I’d automate. Instead of typing a fixed number into every frame, pull it from Figma’s variables system so column counts stay consistent everywhere the variable is used.

Which Grid Type Should You Use?

Match the type to what you’re building, not to whatever you used last time.

Icon and symbol work wants a uniform grid, since precision matters more than flow there.

Web and app screens want columns, mostly because the component library was already built on columns before anyone opened this file.

Dashboards and long-form pages often read better on rows, or on rows and columns applied to the same frame at once. Nothing stops you from stacking both and toggling them with Shift and G.

Early wireframes don’t need any of this precision. A rough column count is fine at that stage. Once a screen becomes a higher fidelity mockup, tightening the gutter and column count to a real breakpoint is worth the extra minute.

What Column Count and Gutter Size Work Best for Responsive Design?

Twelve columns is still the default answer, and the reason is arithmetic. It divides evenly into halves, thirds, and quarters.

Material Design’s own specification calls for exactly that on larger breakpoints: a 12-column grid with margins and columns following an 8dp baseline, spaced in 8, 16, 24, or 40dp increments (Material Design).

Desktop frames commonly run gutters between 16px and 24px, and that number shrinks as the frame narrows.

Mobile is where people get lazy and reuse the desktop count. Don’t. Dropping to 4 or 6 columns keeps content readable once the viewport falls below a phone-sized breakpoint.

Most design systems tie column and gutter values to multiples of eight long before Figma enters the picture. If that logic is new to you, there’s a dedicated piece on the 8-point grid system.

Should You Save a Grid as a Reusable Style?

Save one when the same guide needs to repeat across more than a couple of frames. A throwaway exploration doesn’t need a style, and creating one anyway just clutters the panel.

It’s quick: click Apply styles in the Layout guide section of the sidebar, then Create Style. Name it something the rest of the team will recognize in six months.

Plans matter here. Anyone on any plan, including the free Starter tier, can create a grid style for personal use, but publishing it to a shared library needs an Education, Professional, Organization, or Enterprise plan (Figma). That’s a real fork between freelancers working solo and teams building a shared design system.

• Worth reusing when several frames in a system need identical alignment
• Not worth it for a one-off layout exploration

One warning. Editing a published style changes every frame referencing it, so that edit is a team decision, not a quiet Friday cleanup.

Anyone weighing whether the library features justify an upgrade can compare tiers in the breakdown of Figma’s free versus professional plans.

How Does the Grid Auto Layout Mode Work?

Switching a frame into Grid mode turns it into a two dimensional container that flows content across rows and columns at the same time. Figma built it into the broader auto layout system rather than shipping it as a separate tool.

That’s the opposite of a plain grid layout guide. Objects here live inside cells instead of sitting near lines that mean nothing to them.

Track sizing can be fixed in pixels, set to Hug so a track resizes with its content, or set to a fractional unit that takes a portion of whatever space is left. Objects can span more than one track too, which is the whole reason bento style layouts stopped requiring three nested frames.

The mode went from rough beta to mature faster than most Figma features, and most of the early complaints are gone.

Where it holds up

• True two dimensional layout inside a single frame
• Objects can span multiple tracks instead of one cell
• Track sizing adapts with Hug and fractional units
• Columns and rows reorder by dragging a track, and content repositions itself when tracks are added or removed

Where it still annoys

• No native percentage-based track sizing, so a track needs a fixed pixel value or a fractional unit workaround
• Setup takes more clicks than a plain layout guide, since every track needs its own size decision

Reordering and content-preserving deletion were the two loudest complaints when Grid launched in beta at Config 2025. Figma’s own community forum flagged both directly after launch, and the company resolved them in stages: on-canvas deletion of a populated column or row shipped within a few months, and full drag-to-reorder arrived when Grid became generally available in May 2026 (forum.figma.com).

How Does a Figma Grid Export to CSS in Dev Mode?

Grid auto layout properties map straight to CSS Grid syntax once a file opens in Dev Mode. A layout guide contributes nothing, since it never held content to begin with.

Developers copy these rules out of the inspect panel instead of rebuilding a layout by eye from a screenshot.

Browser support stopped being an argument years ago. CSS Grid now reaches 99.39% of all tracked browsers, according to Can I Use data cited by oddbird.net in 2024, so the exported code ships almost anywhere. A decade back that was a different conversation, when CSS layout still ran on floats and early flexbox patches.

For teams handing files to engineering, the grid is usually the least painful part of the whole developer handoff.

When Does a Figma Grid Not Apply?

There are a few predictable places where this falls apart, and knowing them saves a rebuild.

Percentage widths are the first. Grid auto layout can’t size a track as a percentage of available space, so a track that needs to be exactly 25% wide still requires a fixed pixel value or a fractional unit workaround (forum.figma.com). Some teams drop in an empty spacer track to fake it. It works, and it leaves clutter behind for something this common.

Data tables are the second misfire.

• Grid auto layout wasn’t designed for tabular data with headers and repeating rows
• Reordering columns after the fact is still clunky
• A dedicated table structure handles the job with less fighting

Anyone tempted to force a spreadsheet layout into Grid should look at how to make a table in Figma first.

Component instances have their own catch. A guide or grid container applies to the frame holding an instance, not to what’s inside it. Anyone trying to edit components from within a locked instance won’t find grid controls there at all.

FAQ on How To Make A Grid In Figma

Is there a maximum number of columns or rows a layout guide allows?

Figma’s documentation lists no hard maximum for the count field. Very high counts still render, they just turn the canvas into noise.

Most production files sit somewhere between 2 and 24 columns depending on the breakpoint.

Does the grid feature work the same on the free plan as on paid plans?

Inside a file, yes. Every plan gets the same layout guide types and the same grid auto layout mode.

Publishing a saved style to a shared team library is the part that needs a paid seat rather than the free Starter tier.

How does Figma’s grid compare to the grid tools in Sketch or Framer?

Sketch ships its own layout grid, though importing settings between tools rarely matches pixel for pixel, according to designer reports on Figma’s forum.

Framer has a native layout grid too, with column or row types, gap, margin, and width settings per breakpoint. It stays an editor-only guide and never appears on the published site.

Can a variable control the number of grid columns instead of a fixed number?

Yes. Figma’s plugin API exposes a boundVariables field on grid styles for exactly this, so one variable can drive column count across every frame using it.

Change the variable once and every bound guide updates together.

Does turning on a grid move or resize objects already on the frame?

A layout guide leaves everything where it is. It’s only an overlay.

Grid auto layout does not. It actively repositions children into rows and columns immediately, which can wreck a layout that wasn’t built with tracks in mind.

Can grid settings be copied from one frame and pasted onto another?

Yes. Select the frame, click the layout guide in the sidebar to highlight it, copy with Cmd+C (Mac) or Ctrl+C (Windows), then paste onto another frame with Cmd+V or Ctrl+V.

For settings that need to stay in sync across many frames, saving the configuration as a grid style and applying it from the Assets panel scales better.

What Should You Set Up First in How To Make A Grid In Figma?

Build order beats feature knowledge here. Start with a layout guide for rough alignment, pick the grid type that suits the content, and save grid auto layout for frames that already hold real, responsive elements.

• Layout guide for raw alignment
• Grid type matched to content
• Grid auto layout for finished, responsive frames

The cost of starting with a guide is that nothing reflows until grid auto layout shows up later. Early on, that trade is fine. Iteration speed is worth more than structure when the screen might get thrown out by Thursday.

Once that order is settled, the grid stops being a single-frame concern and turns into the foundation for a full page, which is where designing a website in Figma picks up.