Responsive grid systems in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Responsive Grid Columns

In a responsive grid system, what happens to the number of columns displayed when the screen size decreases from desktop to mobile?

A The number of columns decreases to fit content better on smaller screens.

B The number of columns stays the same regardless of screen size.

C The number of columns increases to fit more content horizontally.

D Columns are removed completely and content stacks vertically without any grid.

💡 Hint

Think about how content should be easy to read on small screens.

Responsive grids reduce the number of columns on smaller screens to make content easier to read and navigate.

❓ visualization

intermediate

Identifying Responsive Grid Behavior in Figma

You have a Figma frame set with a 12-column grid. Which behavior best describes how the grid should adapt when switching from desktop to tablet view?

A The grid disappears and content is manually positioned.

B The grid keeps 12 columns but reduces gutter size to fit content.

C The grid switches to a fixed pixel layout ignoring columns.

D The grid changes to 6 columns with wider gutters to maintain spacing.

💡 Hint

Responsive grids often halve columns on medium screens.

Reducing columns and adjusting gutters helps maintain balance and readability on smaller screens.

❓ data_modeling

advanced

Configuring Grid Constraints for Responsiveness

In Figma, which constraint settings should you apply to a grid container to ensure it resizes fluidly across different screen widths?

A Set horizontal constraints to 'Left' and 'Right' to stretch with the frame width.

B Set horizontal constraints to 'Center' to keep the grid fixed in the middle.

C Set horizontal constraints to 'Left' only to keep grid fixed on the left side.

D Set horizontal constraints to 'Right' only to keep grid fixed on the right side.

💡 Hint

Think about how the grid should expand or shrink with the frame.

Setting constraints to both left and right allows the grid to stretch and adapt fluidly to frame size changes.

🎯 Scenario

advanced

Designing a Responsive Dashboard Grid

You are designing a dashboard in Figma that must look good on desktop, tablet, and mobile. Which grid setup best supports this goal?

A Use a 24-column grid on desktop and reduce gutter size on smaller devices.

B Use a 12-column grid on desktop, 8-column on tablet, and 4-column on mobile with consistent gutter ratios.

C Use a 6-column grid on desktop and tablet, and switch to freeform layout on mobile.

D Use a fixed 12-column grid on all devices and scale the entire frame down on smaller screens.

💡 Hint

Consider how column count and gutter size affect layout clarity on different devices.

Adjusting column count and maintaining gutter ratios ensures consistent spacing and readability across devices.

🔧 Formula Fix

expert

Troubleshooting Grid Responsiveness Issues

In Figma, a responsive grid does not resize when the frame width changes. Which setting is most likely causing this problem?

A The frame has auto-layout enabled with horizontal resizing set to 'Fill container'.

B The grid columns are set to 'Stretch' instead of fixed width.

C The grid container's horizontal constraints are set to 'Center' instead of 'Left' and 'Right'.

D The grid gutters are set to a fixed pixel value instead of percentage.

💡 Hint

Check how the grid container behaves when resizing the frame.

If horizontal constraints are set to 'Center', the grid stays fixed in the center and does not stretch with the frame.