figma guide
Figma Layout Grids: Columns, Baseline, and 8pt Spacing That Scale
Set column, row, and baseline grids in Figma, align to an 8pt spacing system, and hand off layouts engineers can map to CSS grid—without fighting Auto Layout.
- Published
- Updated
- Jun 02, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
Layout grids in Figma are non-printing guides on a frame: columns for page width, rows for vertical rhythm, and baseline for type alignment. Select a frame → Layout grid in the right panel → add a grid type and set count, gutter, and margin. Pair grids with an 8pt spacing scale (8, 16, 24, 32…) on auto layout padding and gaps—not random numbers. Grids help you align; auto layout + constraints tell the file how to resize (responsive design). For deck work, see slide grids; for file hygiene, organize at scale. Browse more setup guides on the Figma guides hub.
Who this is for
- Product and web designers who want consistent gutters without eyeballing every frame.
- Design system leads defining spacing tokens before variables ship.
- Engineers who ask “what grid is this?” during Dev Mode review.
Layout grid types in Figma (what each one does)
| Grid type | Controls | Best for | Handoff note |
|---|---|---|---|
| Columns | Count, gutter, margin, stretch/center | Marketing pages, dashboards, 12-col web | Maps to CSS grid-template-columns |
| Rows | Height, gutter, count | Vertical modules, poster layouts | Less common in product UI |
| Baseline | Size, offset, color | Editorial type, slide titles | Engineers rarely implement 1:1—document exceptions |
| Square (grid style) | Block size | Icons, illustration, game UI | Good for asset sheets, not app chrome |
Verdict: default web screens to a 12-column (or 4-column mobile) layout grid; use baseline only when typography rhythm is the hero (slides, editorial).
Set up a 12-column web grid (desktop)
- Select your desktop frame (e.g. 1440×900).
- In the right panel, click + under Layout grid.
- Choose Columns.
- Recommended starting values:
| Setting | Typical value | Why |
|---|---|---|
| Count | 12 | Matches common CSS grids |
| Type | Stretch | Columns fill width between margins |
| Margin | 80–120 (each side) | Content “max width” feel |
| Gutter | 24 | Aligns with 8pt scale (3×8) |
| Color | Low-opacity pink/blue | Visible but not distracting |
- Toggle grid visibility with ⌃G (Mac) or use the canvas grid icon—grids are per frame, not global.
Common mistake: different gutter/margin on every screen—pick one spec in your README and duplicate frames from a template.
Mobile and tablet column grids
Do not stretch the same 12-column spec to 390px width.
| Breakpoint frame | Column count | Gutter | Margin |
|---|---|---|---|
| Mobile (360–390) | 4 | 16 | 16 |
| Tablet (768) | 8 | 24 | 32 |
| Desktop (1280+) | 12 | 24 | 80+ |
Name frames consistently (web / mobile / checkout) so prototypes and mobile safe areas stay linked. Pair with responsive constraints inside each breakpoint.
8pt spacing system (grids are not enough)
Layout grids align columns; spacing is padding, gaps, and component size steps.
Core scale
Use multiples of 8: 4 (half-step for fine type), 8, 12, 16, 24, 32, 40, 48, 64, 80, 96.
| Token name | px | Use |
|---|---|---|
space/1 | 4 | Icon–label gap, dense tables |
space/2 | 8 | Inline chips, tight stacks |
space/3 | 16 | Card padding, form field gap |
space/4 | 24 | Section padding, column gutter |
space/5 | 32 | Module separation |
space/6 | 48+ | Hero whitespace |
Apply on auto layout frames: padding and item spacing should pull from this list—not 13px or 27px unless you document an exception.
Workflow tip: publish spacing as variables (space/3) when your team is on variables (designer-first explainer) and bind them to component padding.
Baseline grids: when they help (and when they waste time)
Baseline grids snap text baselines to horizontal lines.
Use baseline when:
- Building slide decks with mixed title/body sizes.
- Designing editorial landing pages with hanging headings.
Skip baseline when:
- Shipping dense product UI where auto layout line heights already work.
- Handing off to engineers who will use flex/grid, not baseline CSS.
If you use baseline, set grid size to your body line height (e.g. 24px for 16/24 type) and align headings with line-height math—not arbitrary Y nudges (typography scales).
Grids + Auto Layout together
| Task | Tool |
|---|---|
| Page-level alignment to margins | Column layout grid on the parent frame |
| Component internals (button row, card stack) | Auto layout with 8pt gaps |
| Resizing behavior | Hug / fill + min/max width (Auto Layout patterns) |
| Legacy freeform groups | Constraints until refactored |
Common mistake: snapping every auto-layout child to the column grid while using hug contents—the grid is for the frame, not every nested icon.
Recommended pattern: one page frame with a layout grid; children are auto-layout sections (Section / Hero, Section / Features) with internal spacing from tokens.
Grids in design systems and libraries
- Save starter frames (mobile/tablet/desktop) with grids pre-applied on a
Templatespage. - Do not publish layout grids inside every component—components use auto layout, not 12 columns.
- Document grid specs in the library cover or
Specspage so team library consumers match marketing and product.
When marketing uses a wider bleed than product, use two template frames rather than one-off grid edits per file.
Handoff: what engineers need
Grids are invisible in production—they need numbers:
| Design decision | Dev Mode / spec note |
|---|---|
| Max content width | “Content max 1200px, centered” |
| Column count at breakpoint | “12 col desktop, 4 col mobile” |
| Gutter | gap: 24px or CSS grid gap |
| Section spacing | Token names: space/5 between modules |
Link Dev Mode checklist and semantic color so spacing tokens sit beside visual tokens.
Troubleshooting
Grid does not show
Grids are per frame—select the parent frame, not a child group. Toggle visibility in the layout grid section.
Elements will not snap
Check nudge amount in preferences; hold ⌘ (Mac) to snap against grid vs other layers. Auto-layout children may ignore column snap—snap the section frame first.
Grid breaks after resize
Stretch columns reflow; fixed width columns do not. For responsive files, prefer stretch + documented max width frame inside.
Marketing vs product grids clash
Maintain two template frames in the library rather than editing grids on shipped screens.
FAQ
Should I use 4px or 8px as the base unit?
8px is the industry default for product UI; 4px is a half-step for typography and dense UI. Document both in your token table.
Do layout grids export?
No—grids are editor guides. Export specs or use Dev Mode; do not rely on flattened PNGs for spacing (export guide).
Can I copy grids between files?
Copy a frame that already has grid settings, or use styles / team templates. Grids do not travel with arbitrary pasted groups.
Grid vs square grid for icons?
Use square grids on dedicated icon frames; use column grids on pages. Mixing both on one UI frame adds noise.
Recommended next steps
- Create three template frames (mobile, tablet, desktop) with column grids and drop them on every new page.
- Replace one-off spacing with an 8pt variable set and bind your top five components.
- Read Auto Layout in practice and responsive frames so grids and resize behavior stay aligned.
Layout grids set the stage; spacing tokens and auto layout perform the play—use all three, and handoff stops being guesswork.
§ Keep reading