Layout Grids are visual layout systems used in Figma to organize, align, and structure objects inside frames. They help designers create consistent margins, columns, rows, spacing, and alignment across websites, mobile applications, dashboards, landing pages, and responsive interfaces.
In current Figma terminology, the feature previously known as Layout Grid was renamed to Layout Guide in May 2025. Layout Guides include uniform grids, columns, and rows, and they are different from the Grid option available in Auto Layout.
For professional Figma learning, visit JustAcademy Figma Training and explore the course demo through Register for Figma Course Demo.
A Layout Grid is a visual structure placed over a frame to help designers position elements consistently. It provides an invisible design structure that can be represented visually through columns, rows, or a uniform square grid.
Frame
┌──────────────────────────────────────┐
│ | | | | | | │
│ | | | | | | │
│ | | | | | | │
└──────────────────────────────────────┘
Layout Grid Structure
Figma renamed the Layout Grid feature to Layout Guide in May 2025. The purpose remains to provide visual aids for precise alignment and structured layouts.
Layout Guides can be added to frames and can contain uniform grids, columns, or rows.
┌────────────────────────────────────────┐
│ Margin │ Col │ Gut │ Col │ Gut │ Col │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
└────────────────────────────────────────┘
Margin = Space outside the grid
Column = Main content area
Gutter = Space between columns
| Term | Meaning |
|---|---|
| Layout Grid | Older Figma terminology for the layout guide feature |
| Layout Guide | Current Figma terminology |
| Uniform Grid | Square grid used for precise placement |
| Column Guide | Vertical layout structure |
| Row Guide | Horizontal layout structure |
Figma provides three primary Layout Guide types.
A Uniform Grid divides a frame into equally sized square cells. It is particularly useful when precision is important, such as icon design, symbols, illustrations, and pixel-oriented layouts.
┌───┬───┬───┬───┬───┐
│ │ │ │ │ │
├───┼───┼───┼───┼───┤
│ │ │ │ │ │
├───┼───┼───┼───┼───┤
│ │ │ │ │ │
└───┴───┴───┴───┴───┘
The size property defines the dimensions of each square in the uniform grid. For example, a size of 8 creates an 8px by 8px grid cell.
Grid Size = 8px
8 × 8
┌────────┐
│ │ 8px
│ │
└────────┘
8px
Columns are vertical guides that span the height of a frame. They are widely used for websites, dashboards, mobile applications, landing pages, and responsive interfaces.
┌──────────────────────────────────────┐
│ │ │ │ │ │ │
│ │ Col 1 │ Col 2 │ Col 3 │ Col 4 │ │
│ │ │ │ │ │ │
└──────────────────────────────────────┘
Rows are horizontal guides that span the width of a frame. They are useful for controlling vertical rhythm and creating consistent horizontal sections.
┌──────────────────────────────────────┐
│──────────────────────────────────────│
│ Row 1 │
│──────────────────────────────────────│
│ Row 2 │
│──────────────────────────────────────│
│ Row 3 │
└──────────────────────────────────────┘
| Feature | Columns | Rows |
|---|---|---|
| Direction | Vertical | Horizontal |
| Spans | Frame height | Frame width |
| Best for | Horizontal content alignment | Vertical content alignment |
| Common use | Web and mobile layouts | Vertical rhythm and sections |
Column Count determines how many columns are displayed in the layout guide.
4 Columns:
| C1 | C2 | C3 | C4 |
8 Columns:
| C1 | C2 | C3 | C4 | C5 | C6 | C7 | C8 |
12 Columns:
|C1|C2|C3|C4|C5|C6|C7|C8|C9|C10|C11|C12|
A 12-column grid is widely used in web design because it provides many combinations for placing content.
12-Column Grid
|1|2|3|4|5|6|7|8|9|10|11|12|
Example:
Sidebar = 3 columns
Main Content = 9 columns
An 8-column structure can be useful for tablet and application layouts where a smaller number of layout divisions is sufficient.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |Mobile interfaces often use a smaller column count because the available screen width is limited.
Mobile:
| C1 | C2 | C3 | C4 |
The exact column count should be selected according to the design system and screen requirements.
Margin is the space between the outer edge of the frame and the layout content area. In a column layout, margins define the left and right breathing room around the grid.
Frame
┌────────────────────────────────────────┐
│← Margin →│ Columns │← Margin →│
└────────────────────────────────────────┘
Gutter is the space between adjacent columns or rows. It prevents content placed in neighboring columns from appearing visually connected.
| Column 1 | ← Gutter → | Column 2 || Property | Meaning |
|---|---|
| Margin | Space between frame edge and grid/content area |
| Gutter | Space between columns or rows |
Column width determines the width of each fixed column. A consistent column width helps create predictable content areas.
Column Width = 80px
| 80px | 80px | 80px | 80px |
Row height determines the height of each fixed row. It can be used to establish consistent vertical structure.
Row 1 = 80px
Row 2 = 80px
Row 3 = 80px
Fixed layout guides use specific dimensions for columns or rows. Designers can define the number of columns or rows and their dimensions.
Fixed guides can be positioned relative to the left, center, right, top, or bottom depending on the guide type.
Stretch guides adapt to the size of their parent frame. They are useful for responsive interfaces because the columns or rows can grow or shrink as the frame changes size.
Small Frame:
| C | C | C | C |
Large Frame:
| C | C | C | C |
| Feature | Fixed | Stretch |
|---|---|---|
| Size | Defined dimension | Adapts to frame |
| Responsive behavior | More controlled | More flexible |
| Width/Height | Can be explicitly defined | Automatically adapts |
| Best for | Fixed structures | Responsive interfaces |
A fixed column can be positioned from the left side of the frame. This is useful when the left edge of the content area needs to remain consistent.
Frame
┌──────────────────────────────┐
│ Margin │ Columns → │
└──────────────────────────────┘
A fixed column layout can begin from the right side of the frame. This is useful for layouts where the right edge needs to remain fixed.
A centered fixed column structure positions the layout around the center of the frame. This can be useful for centered content containers and fixed-width desktop designs.
┌──────────────────────────────────┐
│ │ Content │ │
│ │ Area │ │
└──────────────────────────────────┘
Stretch columns adapt their width when the parent frame is resized. This is useful for responsive website layouts where content should expand or contract with the viewport.
Offset controls where a fixed column or row begins relative to the relevant edge of the frame. It can be useful when the grid does not begin directly at the frame boundary.
Frame Edge
│
│ 16px Offset
│
├──── Column ────┤
For fixed rows, offset can define how far the row structure begins from the top or bottom edge of the frame.
Stretch guides provide a margin setting that defines the distance between the sides of the grid and the frame. This is particularly useful for responsive layouts.
Frame
┌──────────────────────────────────┐
│← Margin →│ Columns │← Margin →│
└──────────────────────────────────┘
In a stretch column or row guide, gutter defines the space between each adjacent column or row.
| Column | ← Gutter → | Column | ← Gutter → | Column |After adding a guide, use the Layout Guide settings to change its type and properties such as count, width, height, margin, gutter, offset, or position type.
Figma allows multiple layout guides to be applied to the same frame. Combining different guides provides more control over complex layouts.
Frame
│
├── Column Guide
│
├── Row Guide
│
└── Uniform Grid
Combining column and row guides creates a two-dimensional structure. This is useful for dashboards, editorial layouts, complex web pages, and responsive applications.
┌──────┬──────┬──────┐
│ │ │ │
├──────┼──────┼──────┤
│ │ │ │
├──────┼──────┼──────┤
│ │ │ │
└──────┴──────┴──────┘
Websites commonly use column grids to align navigation, hero sections, text blocks, images, cards, and footers.
12 Column Website
|1|2|3|4|5|6|7|8|9|10|11|12|
Hero:
|------ Main Content ------|
8 Columns
Sidebar:
|---|
3 Columns
Mobile designs have less horizontal space, so a smaller grid structure can simplify alignment.
Mobile Screen
┌──────────────────┐
│| C1 | C2 | C3 | C4|
│ │
│ Content │
│ │
└──────────────────┘
Tablet layouts can use more columns than mobile layouts while remaining simpler than large desktop structures.
Tablet:
|1|2|3|4|5|6|7|8|
Desktop layouts often have enough space for multi-column structures. A 12-column grid is frequently useful because it allows multiple content-width combinations.
A responsive grid changes its structure or dimensions according to the available frame size.
Mobile
4 Columns
Tablet
8 Columns
Desktop
12 Columns
The exact grid configuration depends on the design system and project requirements.
Grids help establish hierarchy by creating predictable relationships between content blocks. Large sections can span several columns while smaller elements can occupy fewer columns.
Hero Content
┌───────────────────────┐
│ │
│ 8 Columns │
│ │
└───────────────────────┘
Sidebar
┌──────┐
│3 Col │
└──────┘
Grid systems help align the edges of multiple objects. When several elements begin and end on the same grid lines, the interface appears more organized.
Layout grids establish structural alignment while spacing controls the distance between individual elements. Both systems should work together.
Grid = Where elements align
Spacing = How far elements are apart
Margins create breathing room between the content area and the frame boundary. Consistent margins are especially important for responsive web and mobile layouts.
Gutters prevent adjacent columns from becoming visually crowded. A consistent gutter value creates a predictable rhythm across the layout.
The 8-point grid system is a popular approach where dimensions, spacing, or positioning values are based primarily on multiples of 8.
8
16
24
32
40
48
56
64
Figma can use an 8px uniform grid as a hard grid or use rows and columns with values based on multiples of 8 as a softer layout structure.
A hard grid uses fixed grid increments for positioning objects. For example, an 8px uniform grid can encourage objects to align to 8px increments.
A soft grid uses spacing relationships based on a chosen scale rather than forcing every object onto a visible square grid. For example, spacing values can follow multiples of 8.
A baseline grid is a system of horizontal intervals used to maintain consistent vertical rhythm, especially for typography-heavy layouts.
Text Line 1
──────────────
Text Line 2
──────────────
Text Line 3
──────────────
A modular grid combines columns and rows to create rectangular modules. It is useful for dashboards, editorial layouts, galleries, card grids, and complex applications.
┌──────┬──────┬──────┐
│ │ │ │
├──────┼──────┼──────┤
│ │ │ │
├──────┼──────┼──────┤
│ │ │ │
└──────┴──────┴──────┘
Editorial layouts often use multiple columns to organize headings, articles, images, captions, and supporting content.
┌──────┬──────┬──────┬──────┐
│ Main │ Main │ Side │ Side │
│ Text │ Text │ Note │ Img │
└──────┴──────┴──────┴──────┘
Dashboards benefit from modular grids because cards, charts, tables, and KPI blocks can occupy different numbers of columns and rows.
┌───────────┬───────────┐
│ KPI │ KPI │
├─────┬─────┴───────────┤
│Chart│ Chart │
├─────┴─────────────────┤
│ Table │
└────────────────────────┘
Product and content cards can be aligned to a column grid. This helps maintain equal card widths, consistent gaps, and predictable responsive behavior.
A grid can align the logo, navigation links, search field, actions, and profile controls along predictable vertical boundaries.
Hero sections often use several columns for text and imagery. For example, text can occupy five columns while an image occupies seven columns.
12 Columns
┌───────────────┬───────────────────┐
│ Text 5 Cols │ Image 7 Cols │
└───────────────┴───────────────────┘
Forms can use grids to align labels, fields, validation messages, and buttons.
┌──────────────┬────────────────────┐
│ Label │ Input │
├──────────────┼────────────────────┤
│ Label │ Input │
├──────────────┼────────────────────┤
│ Label │ Input │
└──────────────┴────────────────────┘
Layout Guides and Constraints work together. Layout Guides provide the visual structure, while Constraints determine how objects respond when their parent frame is resized.
Frame
│
├── Layout Guide
│
└── Object
│
└── Constraint
↓
Resize Behavior
When a Stretch Layout Guide is combined with constraints, the guide can adapt to the size of the parent frame while the objects maintain their relationships to the relevant guide positions.
Fixed Layout Guides maintain defined dimensions. Constraints continue to determine an object's relationship to the parent frame rather than dynamically adapting the guide in the same way as a stretch guide.
Layout Guides and Auto Layout solve different problems. Layout Guides provide visual alignment references, while Auto Layout controls how content is arranged and resized.
| Layout Guide | Auto Layout |
|---|---|
| Visual structure | Dynamic content arrangement |
| Helps alignment | Controls spacing and resizing |
| Does not itself reflow content | Can reflow and resize content |
| Applied to frames | Applied to frames/layers |
These two features should not be confused.
| Feature | Layout Guide Uniform Grid | Auto Layout Grid |
|---|---|---|
| Purpose | Visual design reference | Actual content layout system |
| Content movement | Does not automatically arrange content | Arranges content in cells |
| Responsive behavior | Guide can adapt depending on settings | Content can resize and reflow |
| Best for | Alignment and visual structure | Dynamic grids and responsive components |
Once a layout guide has been configured, it can be saved as a reusable style. This is useful for design systems where the same grid structure needs to be applied across many frames.
Reusable guide styles allow teams to apply consistent layout structures across multiple screens and pages.
Design System
↓
12 Column Grid Style
↓
Home Page
Dashboard
Product Page
Checkout Page
Layout guides can also be copied from one frame and applied to another frame. This is useful when multiple screens should follow the same layout structure.
Frame A
12 Column Guide
↓ Copy
Frame B
12 Column Guide
Layout Guides can be hidden without removing them. This allows designers to preview the design without the visual grid while keeping the guides available for future editing.
Use the View or Zoom/View options to toggle the visibility of layout guides. Hiding the guides does not remove their configuration from the frame.
Components are also frames, so layout guides can be applied to components. This can be useful for establishing internal alignment and spacing structures for reusable UI elements.
Design systems benefit from standardized grid structures because multiple designers can work using the same alignment rules.
Design System
│
├── Mobile Grid
├── Tablet Grid
├── Desktop Grid
├── Spacing Scale
├── Typography Scale
└── Component Rules
Grid-related values such as margins, gutters, counts, and dimensions can be standardized in a design system. Figma variables can also be used for supported numeric layout-guide properties.
A responsive grid helps designs adapt to different frame sizes. Stretch columns are especially useful when the available width changes.
Desktop
12 Columns
↓
Tablet
8 Columns
↓
Mobile
4 Columns
Grid systems help designers control the maximum width and placement of content. Rather than placing text randomly, designers can define how many columns the content should occupy.
12 Column Grid
Text Content = 8 Columns
Image = 4 Columns
Margins and gutters create intentional whitespace. Good whitespace improves readability and prevents the design from appearing crowded.
Rows and baseline structures help create consistent vertical rhythm. When headings, paragraphs, cards, and sections align to predictable intervals, the interface feels more structured.
Typography can be aligned to columns and rows to create a clear reading structure. Text blocks should usually occupy meaningful grid widths rather than arbitrary widths.
A grid should simplify design decisions rather than make them more complicated. Use only the number of columns, rows, and guides necessary for the design.
Similar screens should normally use consistent outer margins unless there is a specific design reason to change them.
Screen A: 24px margin
Screen B: 24px margin
Screen C: 24px margin
Gutters should normally follow the project's spacing system. Random gutter values can make related screens appear inconsistent.
Create a responsive landing page using a 12-column desktop structure, an 8-column tablet structure, and a 4-column mobile structure.
Desktop:
|1|2|3|4|5|6|7|8|9|10|11|12|
Hero:
|------ Text ------| |------ Image ------|
Tablet:
|1|2|3|4|5|6|7|8|
Mobile:
|1|2|3|4|
Create a dashboard using a modular grid.
┌──────────┬──────────┬──────────┐
│ KPI 1 │ KPI 2 │ KPI 3 │
├──────────┴──────────┼──────────┤
│ Main Chart │ Side │
├──────────────────────┴──────────┤
│ Data Table │
└─────────────────────────────────┘
Use rows and columns to align cards, charts, and tables consistently.
Create a mobile application screen using a 4-column guide.
A Layout Grid is a visual layout structure used to align and organize elements inside a frame.
Figma renamed the feature to Layout Guide in May 2025.
Uniform Grid, Columns, and Rows.
A column guide is a vertical guide that spans the height of a frame and helps structure horizontal layouts.
A row guide is a horizontal guide that spans the width of a frame and helps establish vertical structure.
A gutter is the space between adjacent columns or rows.
Margin is the space between the frame boundary and the grid or content area.
Fixed guides use defined dimensions, while stretch guides adapt their dimensions as the parent frame changes size.
Yes. Multiple guides can be combined to create more complex layout structures.
Yes. Layout Guide configurations can be saved as reusable styles for consistent design systems.
A 12-column grid divides a layout into twelve vertical columns and provides many combinations for placing content.
An 8-point grid is a design approach where dimensions and spacing commonly follow multiples of 8.
No. Layout Guides are visual aids for design alignment, while Auto Layout Grid actively controls content layout and resizing.
| Concept | Meaning |
|---|---|
| Layout Guide | Visual structure for aligning objects |
| Uniform Grid | Square-based grid |
| Column | Vertical layout guide |
| Row | Horizontal layout guide |
| Count | Number of columns or rows |
| Width | Width of a fixed column |
| Height | Height of a fixed row |
| Margin | Space between frame and grid/content |
| Gutter | Space between columns or rows |
| Offset | Starting position of fixed guides |
| Fixed | Guide with defined dimensions |
| Stretch | Guide that adapts to frame size |
| Constraint | Controls object behavior when parent resizes |
Layout Grids are an important part of professional Figma workflows because they provide a reliable visual structure for positioning and aligning interface elements. Columns, rows, uniform grids, margins, gutters, fixed guides, and stretch guides allow designers to create predictable layouts across different screen sizes.
For responsive interfaces, Layout Guides become even more powerful when combined with constraints, Auto Layout, spacing systems, components, and reusable styles. A good grid should simplify design decisions, maintain consistency, and support the actual content rather than unnecessarily restricting creativity.
Mastering Layout Guides helps designers create professional websites, mobile applications, dashboards, landing pages, e-commerce screens, design systems, and responsive interfaces with greater speed and precision.
To learn Figma in a structured way, visit JustAcademy Figma Training and for a course demonstration visit Register for Figma Course Demo.
