Responsive grid systems in Figma - Cell-by-Cell Formula Trace

Sample Data

This data shows common responsive grid system settings for different screen widths in a design tool like Figma. Columns, gutter width, and margin width adjust as screen size changes.

Cell	Value
A1	Screen Width (px)
B1	Columns
C1	Gutter Width (px)
D1	Margin Width (px)
A2	320
B2	4
C2	16
D2	16
A3	768
B3	8
C3	24
D3	24
A4	1024
B4	12
C4	24
D4	32

Formula Trace

Total Content Width = Screen Width - 2 * Margin Width - (Columns - 1) * Gutter Width

Step 1: 2 * Margin Width

Step 2: Columns - 1

Step 3: (Columns - 1) * Gutter Width

Step 4: Screen Width - 2 * Margin Width - (Columns - 1) * Gutter Width

Cell Reference Map

    A       B       C       D
1 | Screen | Columns| Gutter | Margin
  | Width  |        | Width  | Width
-----------------------------------
2 | 320    | 4      | 16     | 16
3 | 768    | 8      | 24     | 24
4 | 1024   | 12     | 24     | 32

Formula uses cells A2, B2, C2, D2 for calculation.

The formula references screen width (A2), columns (B2), gutter width (C2), and margin width (D2) for the smallest screen size row.

Result

    A       B       C       D       E
1 | Screen | Columns| Gutter | Margin | Content
  | Width  |        | Width  | Width  | Width
---------------------------------------------
2 | 320    | 4      | 16     | 16     | 240
3 | 768    | 8      | 24     | 24     | ?
4 | 1024   | 12     | 24     | 32     | ?

The calculated content width for the 320px screen is 240px after subtracting margins and gutters. Content width for other rows is not calculated here.

Sheet Trace Quiz - 3 Questions

How many gutters are there for 4 columns?

A 3

B 4

C 2

D 5

Key Result

Content Width = Screen Width minus twice the margin width minus total gutter widths