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.

Practice

1. What is the main purpose of using a grid or column layout in a Figma dashboard design?

easy

A. To make the dashboard load faster

B. To add random colors to the dashboard

C. To organize content clearly and keep alignment consistent

D. To remove all text from the dashboard

Solution

1. Step 1: Understand grid and column layout purpose

   Grids and columns help arrange elements neatly and keep alignment consistent.

2. Step 2: Eliminate unrelated options

   Adding colors, speeding load, or removing text do not relate to layout structure.

3. Final Answer:

   To organize content clearly and keep alignment consistent -> Option C

4. Quick Check:

   Grid layout = clear organization [OK]

Hint: Think about how to keep things neat and aligned [OK]

Common Mistakes:

• Confusing layout with color or speed
• Ignoring alignment importance
• Thinking layout removes content

2. Which of the following is the correct way to add a 12-column layout grid in Figma?

easy

A. Set Layout Grid > Columns > Count: 12 > Type: Columns

B. Set Layout Grid > Rows > Count: 12 > Type: Rows

C. Set Layout Grid > Columns > Count: 6 > Type: Rows

D. Set Layout Grid > Rows > Count: 6 > Type: Columns

Solution

1. Step 1: Identify correct grid settings for columns

   To create columns, choose Columns type and set count to 12.

2. Step 2: Check other options for errors

   Rows type or wrong counts do not create a 12-column layout.

3. Final Answer:

   Set Layout Grid > Columns > Count: 12 > Type: Columns -> Option A

4. Quick Check:

   Columns count 12 = Set Layout Grid > Columns > Count: 12 > Type: Columns [OK]

Hint: Columns need 'Columns' type, not Rows [OK]

Common Mistakes:

• Choosing Rows instead of Columns
• Setting wrong count number
• Mixing Rows type with column count

3. Given a Figma frame with a 4-column layout grid, if each column is 100px wide with 20px gutter, what is the total width covered by the columns and gutters?

medium

A. 480px

B. 420px

C. 440px

D. 460px

Solution

1. Step 1: Calculate total column width

   4 columns x 100px = 400px total column width.

2. Step 2: Calculate total gutter width

   There are 3 gutters between 4 columns, 3 x 20px = 60px.

3. Step 3: Add columns and gutters

   400px + 60px = 460px total width covered.

4. Final Answer:

   460px -> Option D

5. Quick Check:

   4x100 + 3x20 = 460px [OK]

Hint: Gutters are one less than columns count [OK]

Common Mistakes:

• Counting gutters equal to columns
• Forgetting to add gutters
• Multiplying gutters by columns

4. You set a 3-column layout grid in Figma but the columns overlap each other. What is the most likely cause?

medium

A. The gutter width is set to zero or too small

B. The column count is set to 1 instead of 3

C. The layout grid is set to Rows instead of Columns

D. The frame width is too large

Solution

1. Step 1: Understand column overlap cause

   If gutters are zero or very small, columns will touch or overlap.

2. Step 2: Check other options for relevance

   Wrong column count or grid type causes different issues, not overlap. Large frame width won't cause overlap.

3. Final Answer:

   The gutter width is set to zero or too small -> Option A

4. Quick Check:

   Small gutter = overlap [OK]

Hint: Check gutter size if columns overlap [OK]

Common Mistakes:

• Ignoring gutter size
• Confusing column count with gutter
• Blaming frame size for overlap

5. You want to design a dashboard in Figma with a 12-column grid where each column is 58px wide and gutters are 24px. If the frame width is 1200px, what should be the left and right margins to center the grid perfectly?

hard

A. No margins needed

B. 120px margins on each side

C. 72px margins on each side

D. 96px margins on each side

Solution

1. Step 1: Calculate total column width

   12 columns x 58px = 696px.

2. Step 2: Calculate total gutter width

   11 gutters x 24px = 264px.

3. Step 3: Total grid width

   696px + 264px = 960px.

4. Step 4: Calculate margins to center

   (1200px - 960px) / 2 = 120px on each side.

5. Final Answer:

   120px margins on each side -> Option B

6. Quick Check:

   12x58 + 11x24 = 960px; (1200-960)/2 = 120px [OK]

Hint: Margin = (Frame width - Grid width) ÷ 2 [OK]

Common Mistakes:

• Ignoring gutters in total width
• Using wrong gutter count
• Forgetting to divide margin by 2