Columns and Rows are fundamental layout structures used in Figma to organize, align, and position UI elements consistently within a design. Columns are vertical guides that span the height of a frame, while rows are horizontal guides that span the width of a frame. They are especially useful for responsive web design, mobile applications, dashboards, landing pages, cards, forms, and design systems.
In current Figma terminology, the feature previously known as Layout Grid was renamed to Layout Guide in May 2025. Column and Row layout guides help designers create structured layouts, while Grid in Auto Layout is a separate feature used to control how content flows and resizes.
For professional Figma training, explore JustAcademy Figma Training and Register for Figma Course Demo.
A column is a vertical layout guide used to divide a frame into vertical sections. A row is a horizontal layout guide used to divide a frame into horizontal sections.
FRAME
┌──────────────────────────────────────┐
│ │ │ │ │
│ Column │ Column │ Column │ Column │
│ │ │ │ │
│────────┼────────┼────────┼───────────│
│ │ │ │ │
│ │ │ │ │
└──────────────────────────────────────┘
Vertical Columns
Horizontal Rows → ─────────────────────
Columns primarily control horizontal organization, while rows primarily control vertical organization.
Columns are vertical guides that extend through the height of a frame. They divide the available horizontal space into multiple vertical areas. Columns are commonly used to align text, images, cards, navigation elements, buttons, and other UI components.
Figma allows column layout guides to use different types such as Left, Center, Right, and Stretch. The selected type determines how the columns behave when the parent frame changes size.
Rows are horizontal guides that extend across the width of a frame. They divide the available vertical space into horizontal areas.
Rows are useful for establishing vertical rhythm, aligning content sections, creating dashboard structures, designing editorial layouts, and maintaining consistent spacing between horizontal elements.
| Property | Columns | Rows |
|---|---|---|
| Direction | Vertical | Horizontal |
| Spans | Height of frame | Width of frame |
| Primary purpose | Horizontal alignment | Vertical alignment |
| Types | Left, Center, Right, Stretch | Top, Center, Bottom, Stretch |
| Main dimension | Column width | Row height |
| Useful for | Web layouts, cards, navigation | Sections, vertical rhythm, dashboards |
Columns and rows provide a visual structure that helps designers position elements consistently. Instead of placing every object manually, designers can use guides as a framework for alignment.
In current Figma, columns and rows belong to the Layout Guide system. Layout guides are visual aids that help designers structure content within frames. They do not become part of the exported design.
Figma provides three layout-guide types: Uniform Grid, Column, and Row.
Frame Width = 1200px
| Margin | Column | Gutter | Column | Gutter | Column | Margin |
| | | | | | | |
|--------|--------|--------|--------|--------|--------|--------|
Column = Content area
Gutter = Space between columns
Margin = Space between frame edge and content area
This structure is common in responsive website design.
Frame Height = 900px
┌──────────────────────────────┐
│ Margin │
├──────────────────────────────┤
│ Row 1 │
├──────────────────────────────┤
│ Gutter │
├──────────────────────────────┤
│ Row 2 │
├──────────────────────────────┤
│ Gutter │
├──────────────────────────────┤
│ Row 3 │
├──────────────────────────────┤
│ Margin │
└──────────────────────────────┘
Column count determines how many columns appear in the layout guide. For example, a designer can use 4 columns for mobile, 8 columns for tablet, and 12 columns for desktop.
| Device | Typical Column Count | Common Usage |
|---|---|---|
| Mobile | 4 | Mobile applications and small screens |
| Tablet | 8 | Tablet and medium layouts |
| Desktop | 12 | Websites and dashboards |
These are common design patterns rather than mandatory Figma rules. Figma supports choosing the count that best fits the project.
Row count determines the number of horizontal divisions in a row layout guide. Rows are particularly useful when the designer wants to maintain consistent vertical spacing.
For example, a dashboard may use rows to organize a header, statistics area, chart area, table area, and footer.
Column width defines the horizontal size of each column when using a fixed column type. A consistent column width helps maintain predictable alignment across the design.
┌──────────────────────────────────────────┐
│ 120px │ 120px │ 120px │ 120px │ 120px │
│ Column │Column │Column │Column │Column │
└──────────────────────────────────────────┘
Fixed column widths are useful when the designer needs precise dimensions.
Row height defines the vertical size of each row when using a fixed row type.
┌───────────────────────────┐
│ Row 1 - 80px │
├───────────────────────────┤
│ Row 2 - 80px │
├───────────────────────────┤
│ Row 3 - 80px │
└───────────────────────────┘
Margin is the space between the outer edge of the frame and the column layout area. For stretch columns, Figma provides a Margin setting that controls this outer spacing.
Frame
│← Margin →│← Columns →│← Margin →│
Margins are important because content placed directly against the frame edge can look crowded.
Row margins define the space between the row layout area and the edges of the frame. They are particularly useful when establishing consistent vertical boundaries.
A gutter is the space between adjacent columns. Gutter spacing prevents content from touching neighboring columns and improves readability.
│ Column │ ← Gutter → │ Column │ ← Gutter → │ Column │In stretch layouts, Figma provides a Gutter setting for the space between columns.
Row gutter is the space between adjacent rows. It creates separation between horizontal content areas and helps establish a consistent vertical rhythm.
┌──────────────┐
│ Row 1 │
├──────────────┤
│ Gutter │
├──────────────┤
│ Row 2 │
├──────────────┤
│ Gutter │
├──────────────┤
│ Row 3 │
└──────────────┘
| Feature | Margin | Gutter |
|---|---|---|
| Location | Outer edge | Between columns or rows |
| Purpose | Separates content from frame | Separates adjacent tracks |
| Example | 24px from frame edge | 16px between columns |
Fixed columns have a defined width and position. Their dimensions remain fixed rather than automatically adapting to the frame size.
Figma provides Left, Center, and Right fixed column types. The selected type determines where the column structure begins within the frame.
The Left type positions the fixed column structure from the left side of the frame. It is useful when the content area should maintain a fixed relationship with the left edge.
┌──────────────────────────────────┐
│ Columns → │
│ ███ ███ ███ │
│ │
└──────────────────────────────────┘
Left aligned
The Right type positions the fixed column structure from the right side of the frame. It can be useful for layouts where the right boundary is the primary alignment reference.
The Center type centers a fixed column layout within the frame. This is useful for content areas that should remain centered as the frame becomes wider.
┌──────────────────────────────────────┐
│ │ Column Area │ │
│ │ Column Area │ │
│ │ Column Area │ │
└──────────────────────────────────────┘
Centered
Stretch columns adapt their width when the parent frame changes size. This makes them useful for responsive layouts.
When a Stretch type is selected, Figma automatically calculates column width based on the available frame size, count, margins, and gutters. The width field is set to Auto for stretch columns.
| Feature | Fixed | Stretch |
|---|---|---|
| Width | Defined | Automatically adapts |
| Responsive behavior | Limited | Strong |
| Width field | Available | Auto |
| Margin | Not used in the same way | Available |
| Gutter | Not used in the same way | Available |
| Best for | Precise fixed structures | Responsive layouts |
Fixed rows have a specific height. They are useful when horizontal sections need predictable dimensions.
For example, a dashboard header could use a fixed 80px row while a content section uses a larger row.
The Top row type starts the fixed row structure from the top edge of the frame. It is useful for layouts where the upper edge controls vertical positioning.
The Bottom row type starts the fixed row structure from the bottom edge of the frame. It is useful for layouts where the bottom edge is the primary reference point.
The Center row type positions a fixed row structure around the center of the frame. This can be useful for vertically centered content structures.
Stretch rows automatically adapt their height when the parent frame changes size. They are useful for responsive vertical structures.
Stretch rows use margins and gutters to determine how the available height is distributed among the rows.
| Property | Fixed Row | Stretch Row |
|---|---|---|
| Height | Defined | Responsive |
| Height field | Available | Auto |
| Margin | Different behavior | Available |
| Gutter | Different behavior | Available |
| Use case | Fixed sections | Responsive sections |
Offset defines where a fixed column layout begins relative to its selected edge. For example, a left column can have an offset that moves its starting position inward from the left edge.
Figma supports Offset for columns positioned Left or Right and rows positioned Top or Bottom.
Row offset defines the starting position of a fixed row structure relative to the top or bottom edge of the frame.
Frame
┌─────────────────────────────┐
│ │
│ ← Offset → │
├─────────────────────────────┤
│ Row 1 │
├─────────────────────────────┤
│ Row 2 │
└─────────────────────────────┘
Figma allows layout guides to be added to frames, and components are also frames, so guides can be used on components as well.
Columns and rows can be combined on the same frame. This creates a two-dimensional visual framework for both horizontal and vertical alignment.
┌──────┬──────┬──────┬──────┐
│ │ │ │ │
├──────┼──────┼──────┼──────┤
│ │ │ │ │
├──────┼──────┼──────┼──────┤
│ │ │ │ │
└──────┴──────┴──────┴──────┘
Columns + Rows
Combining multiple guides is useful for complex layouts where both horizontal and vertical alignment need to be controlled.
Columns are commonly used in website layouts to create predictable content widths. A 12-column desktop layout can support navigation, hero sections, text blocks, images, cards, and multi-column content.
12 Column Website
┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
│1│2│3│4│5│6│7│8│9│10│11│12│
└─┴─┴─┴─┴─┴─┴─┴─┴─┴──┴──┴──┘
Mobile interfaces commonly use fewer columns because the available width is limited. A 4-column structure is a common starting point, but the exact number should depend on the design requirements.
Mobile Frame
┌───────────────────────┐
│ │ │ │ │ │
│ │ C1 │ C2 │ C3 │ C4 │
│ │ │ │ │ │
└───────────────────────┘
Tablet layouts often require more horizontal flexibility than mobile layouts. An 8-column structure can provide useful intermediate alignment options.
Desktop layouts have more horizontal space, allowing designers to use larger column counts and more complex structures. A 12-column system is widely used because it supports many combinations of content widths.
Rows can divide a webpage into major vertical sections such as navigation, hero, feature section, testimonials, pricing, and footer.
┌───────────────────────────┐
│ Navigation │
├───────────────────────────┤
│ Hero Section │
├───────────────────────────┤
│ Features │
├───────────────────────────┤
│ Testimonials │
├───────────────────────────┤
│ Footer │
└───────────────────────────┘
Responsive columns change their dimensions or behavior according to the available frame size. Stretch layout guides are particularly useful for this because their column widths adapt when the frame is resized.
Responsive rows can adapt vertically when a frame changes size. Stretch rows are useful for creating flexible vertical structures.
Columns help establish a clear hierarchy by providing consistent alignment points. Headings, paragraphs, images, cards, and buttons can share common column boundaries.
Rows help establish vertical rhythm. When sections and elements follow predictable vertical spacing, the interface becomes easier to scan and visually balanced.
Text should generally align consistently with the column structure. For example, a heading may span 8 columns while supporting text spans 6 columns. This creates hierarchy without requiring arbitrary positioning.
Images can span one or more columns. For example, a hero image may span 6 columns while the hero text occupies the remaining 6 columns.
┌──────────────┬──────────────┐
│ │ │
│ IMAGE │ TEXT │
│ 6 Cols │ 6 Cols │
│ │ │
└──────────────┴──────────────┘
Column spanning means allowing an element to occupy multiple columns. It is useful for creating different content widths while maintaining alignment with the overall grid.
| Element | Example Span |
|---|---|
| Small icon | 1 column |
| Card | 3 columns |
| Article | 6–8 columns |
| Hero section | 12 columns |
Row spanning means allowing an element or structured area to extend across multiple row regions. It is useful for dashboards, editorial layouts, and complex visual compositions.
A card system can use columns to maintain consistent card widths and gaps.
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Card 1 │ │ Card 2 │ │ Card 3 │
│ │ │ │ │ │
└─────────┘ └─────────┘ └─────────┘
↑ ↑ ↑
Columns Columns Columns
Rows help align cards vertically when multiple card sections are present. They are useful for dashboards and content-heavy interfaces.
Columns can help establish consistent positions for logos, navigation links, search controls, and account actions.
┌─────────────────────────────────────────────┐
│ Logo │ Navigation Links │ Search │ Account │
└─────────────────────────────────────────────┘
Rows can divide a header into multiple horizontal zones, such as announcement bar, main navigation, and secondary navigation.
Dashboards often use multiple columns because they contain cards, charts, tables, filters, and navigation panels. A column structure helps maintain alignment between these elements.
┌──────┬──────────────────────────────┐
│ Side │ Dashboard │
│ bar ├───────────┬──────────────────┤
│ │ Chart │ Statistics │
│ ├───────────┼──────────────────┤
│ │ Table │
└──────┴──────────────────────────────┘
Editorial designs use columns extensively for articles, newspapers, magazines, and content-heavy websites. Different text blocks can span different numbers of columns while maintaining a common alignment system.
Columns can be used to align form labels, fields, helper text, and action buttons. Rows can provide consistent vertical spacing between form groups.
Columns can work together with constraints to create more flexible layouts. Constraints determine how objects respond when their parent frame changes size, while layout guides provide the visual alignment framework.
Rows can also be combined with constraints to control vertical behavior. For example, an object can maintain its position relative to the top, bottom, or center of its parent depending on the desired behavior.
When a stretch layout guide is combined with constraints, Figma can use the nearest column or row as part of the positioning logic. This is useful when designing responsive interfaces.
Fixed layout guides provide fixed dimensions and positions, while constraints continue to relate objects to the parent frame. This can produce different behavior from stretch guides and is useful when the design requires fixed reference dimensions.
Columns and Auto Layout solve related but different problems. Columns provide visual alignment guides, while Auto Layout controls how content is arranged and resized.
| Feature | Columns | Auto Layout |
|---|---|---|
| Main purpose | Visual alignment | Dynamic layout behavior |
| Controls content flow | No | Yes |
| Controls spacing automatically | No | Yes |
| Responsive behavior | Provides guide framework | Controls resizing/reflow |
| Exported | No | Affects actual design structure |
Rows can be used as a visual reference while Auto Layout controls the actual arrangement of elements. For example, a designer can use row guides to define vertical rhythm and Auto Layout to maintain the actual spacing between components.
It is important not to confuse a Column or Row layout guide with Grid Auto Layout. Layout guides are visual aids, while Grid Auto Layout creates an actual two-dimensional content layout with cells, rows, columns, gaps, and resizing behavior.
| Feature | Layout Guide | Grid Auto Layout |
|---|---|---|
| Purpose | Visual structure | Content layout |
| Columns | Guides | Actual tracks |
| Rows | Guides | Actual tracks |
| Content reflow | No | Yes |
| Cell spanning | No | Yes |
Grid Auto Layout provides actual columns and rows that contain objects in cells. Designers can specify the number of columns and rows and control the gaps between them.
In Grid Auto Layout, rows are actual layout tracks rather than visual guides. The number of rows can be automatically determined based on the content when the row count is set to Auto.
In Grid Auto Layout, the column gap defines the distance between columns. This is different from a visual column guide because the gap directly participates in the actual layout calculation.
Row gap defines the distance between rows in Grid Auto Layout. Designers can set the value directly in the right sidebar.
The 8-point grid system is a common design approach where dimensions and spacing are based on multiples of 8. Columns and rows can support this system by using spacing values that follow the chosen design scale.
A hard grid can use an 8px uniform grid, while a soft grid can use row or column guides with values divisible by 8.
A hard grid places elements directly on fixed grid increments. For example, an 8px uniform grid can help designers align objects to consistent 8px positions.
A soft grid focuses on relationships between elements rather than requiring every object to sit directly on grid lines. Margins, gutters, dimensions, and spacing can follow a consistent numerical system.
Columns can become part of a design system by defining standard layout structures for mobile, tablet, and desktop interfaces.
| Breakpoint Type | Possible Structure | Purpose |
|---|---|---|
| Mobile | 4 columns | Compact layouts |
| Tablet | 8 columns | Intermediate layouts |
| Desktop | 12 columns | Complex layouts |
Column count, width, margin, gutter, and other layout values can be standardized as part of a design system. Figma variables can be used for several layout-guide properties, including row and column count, width, height, margin, offset, and gutter.
Once a column structure is finalized, it can be saved as a layout guide style and reused across designs. This helps teams maintain consistent layout rules. Figma supports styles for rows, columns, and uniform grids.
Row configurations can also be saved as reusable layout guide styles. This is helpful for design systems that require consistent vertical rhythm across multiple screens.
Figma allows layout guides to be copied from one frame and applied to another. This can be useful when multiple screens need the same column or row structure.
Layout guides can be hidden without removing them. This allows designers to inspect the final design without deleting the underlying layout structure.
Figma provides a global visibility control for layout guides and also allows individual guides to be shown or hidden.
If the guides are hidden, they can be displayed again using Figma's view options or the layout-guide visibility control. The guides remain available even when they are temporarily hidden.
Figma notes that layout guides can only be applied to frames, and rotated frames can prevent guides from appearing as expected.
Rows have the same basic visibility requirements as columns. Check that the selected object is a frame and that layout-guide visibility is enabled.
Design a responsive landing page using a 12-column desktop structure, an 8-column tablet structure, and a 4-column mobile structure.
Desktop
┌────────────────────────────────────────────┐
│ Header 12 Columns │
├────────────────────────────────────────────┤
│ Hero Text │ Hero Image │
├────────────────────────────────────────────┤
│ Card 1 │ Card 2 │ Card 3 │ Card 4 │
├────────────────────────────────────────────┤
│ Footer │
└────────────────────────────────────────────┘
Create a dashboard using columns for the sidebar and main content area and rows for statistics, charts, and tables.
┌──────────┬────────────────────────────────┐
│ Sidebar │ Header │
│ ├────────────────────────────────┤
│ │ Stats Cards │
│ ├────────────────────────────────┤
│ │ Charts │
│ ├────────────────────────────────┤
│ │ Data Table │
└──────────┴────────────────────────────────┘
Create a mobile application screen using a 4-column layout. Use the columns to align the title, image, content, cards, and buttons.
┌───────────────────────┐
│ │ │ │ │ │
│ Header │
│ │
│ Image │
│ │
│ Content │
│ │
│ Button │
│ │
└───────────────────────┘
Create an e-commerce product page using columns to align product cards and rows to maintain vertical consistency.
Use rows to structure a login screen vertically and columns to align labels, input fields, and buttons.
┌─────────────────────────────┐
│ Logo │
├─────────────────────────────┤
│ Welcome │
├─────────────────────────────┤
│ Email │ Input │
├─────────────────────────────┤
│ Password │ Input │
├─────────────────────────────┤
│ Login Button │
└─────────────────────────────┘
A column is a vertical layout guide used to structure and align content inside a frame.
A row is a horizontal layout guide used to organize and align content vertically within a frame.
A gutter is the space between adjacent columns or rows.
A margin is the space between the frame boundary and the layout content area.
Fixed columns have defined dimensions, while stretch columns adapt their width when the parent frame changes size.
A layout guide provides a visual alignment framework, while Auto Layout controls actual content arrangement, spacing, and resizing.
Yes. Multiple layout guides can be combined on a frame to provide both horizontal and vertical alignment.
It is the space separating adjacent columns.
It is the space separating adjacent rows.
They provide a consistent alignment framework that can be adapted across different screen sizes.
A stretch layout guide adapts its dimensions as the parent frame is resized.
Yes. Layout guide styles can be created and reused across designs.
| Term | Meaning |
|---|---|
| Column | Vertical layout guide |
| Row | Horizontal layout guide |
| Count | Number of columns or rows |
| Width | Width of fixed columns |
| Height | Height of fixed rows |
| Margin | Space between guide structure and frame edges |
| Gutter | Space between columns or rows |
| Offset | Starting position of fixed guides |
| Fixed | Guide dimensions remain defined |
| Stretch | Guide dimensions adapt to frame size |
| Constraint | Controls how objects respond to frame resizing |
| Auto Layout | Controls actual content arrangement and resizing |
Columns and Rows are essential tools for creating structured, consistent, and professional Figma layouts. Columns provide a vertical framework for horizontal alignment, while rows establish a horizontal framework for vertical organization. By combining column count, row count, margins, gutters, offsets, fixed guides, and stretch guides, designers can create layouts that remain organized across different screen sizes.
For responsive interfaces, columns and rows become even more powerful when combined with constraints and Auto Layout. Layout guides provide the visual structure, constraints help define responsive positioning, and Auto Layout controls actual content flow and resizing. Figma's current Layout Guide system supports columns and rows as reusable foundations for scalable design systems.
To learn Figma professionally, visit JustAcademy Figma Training and Register for Figma Course Demo.
