Grid and column layout in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding grid columns in Figma

In Figma, you want to create a layout with 4 equal columns using the grid system. Which setting correctly achieves this?

A Set grid type to 'Columns', count to 3, and gutter to 20

B Set grid type to 'Rows', count to 4, and gutter to 0

C Set grid type to 'Grid', count to 4, and gutter to 10

D Set grid type to 'Columns', count to 4, and gutter to 0

💡 Hint

Columns grid type divides the frame vertically into equal parts.

Choosing 'Columns' with count 4 and gutter 0 creates 4 equal vertical columns without spacing.

❓ visualization

intermediate

Visualizing gutter effect on column layout

You have a frame 1200px wide with a 3-column layout and gutter set to 20px. What is the width of each column?

A 386.67px

B 400px

C 420px

D 380px

💡 Hint

Subtract total gutter width from frame width, then divide by column count.

Total gutter width = 2 gutters × 20px = 40px. Available width = 1200 - 40 = 1160px. Each column = 1160 / 3 = 386.67px.

❓ data_modeling

advanced

Combining grids and columns for responsive design

You want to design a dashboard in Figma that adapts to different screen sizes using grids and columns. Which approach best supports this?

A Use a fixed 4-column grid with pixel widths and no gutters

B Use a 12-column grid with percentage-based column widths and gutters

C Use a row grid with fixed height and fixed gutter size

D Use a grid layout with equal square cells and fixed pixel size

💡 Hint

Responsive design needs flexible widths that scale with screen size.

A 12-column grid with percentage widths allows flexible resizing and alignment on different screen sizes, ideal for responsive dashboards.

🔧 Formula Fix

advanced

Fixing overlapping elements in a column layout

You created a 3-column layout in Figma with gutter 10px, but elements in adjacent columns overlap. What is the most likely cause?

A Column widths plus gutters exceed frame width

B Gutter size is set to zero

C Grid type is set to 'Rows' instead of 'Columns'

D Frame height is too small

💡 Hint

Check if total width of columns and gutters fits inside the frame width.

If column widths plus gutters are wider than the frame, columns overlap because there is no space to fit them side by side.

🎯 Scenario

expert

Designing a complex BI dashboard grid layout

You are designing a BI dashboard in Figma with multiple sections: a header, a 12-column main content area, and a footer. The main content area must have gutters of 24px and columns that adapt to screen width. Which grid settings and layout approach best achieve this?

A Set main content grid to 12 columns with 0 gutters, fixed pixel widths, and place header/footer inside main grid

B Use a single grid with 12 rows and 12 columns, gutters 24px, and fixed pixel sizes for all sections

C Set main content grid to 12 columns with 24px gutters, use percentage widths, and set header/footer as separate frames with fixed height

D Set main content grid to 6 columns with 48px gutters, use fixed pixel widths, and combine header/footer in main grid

💡 Hint

Think about flexible widths for main content and fixed sizes for header/footer.

Using 12 columns with 24px gutters and percentage widths allows the main content to adapt to screen size. Keeping header/footer as separate frames with fixed height ensures consistent layout.