Grid and column layout in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents the layout settings for a dashboard grid in Figma. It includes the total width, number of columns, gutter width, and a calculated column width.

Cell	Value
A1	Dashboard Width
B1	1200
A2	Number of Columns
B2	12
A3	Gutter Width (px)
B3	20
A4	Column Width (px)
B4	0

Formula Trace

B4 = (B1 - (B2 - 1) * B3) / B2

Step 1: (B2 - 1)

Step 2: (B2 - 1) * B3

Step 3: B1 - ((B2 - 1) * B3)

Step 4: (B1 - (B2 - 1) * B3) / B2

Cell Reference Map

    A       B
1 |Dashboard Width| 1200
2 |Number of Columns| 12
3 |Gutter Width   | 20
4 |Column Width   |  ? 

Arrows:
B1 --> B4
B2 --> B4
B3 --> B4

Cells B1, B2, and B3 provide input values for the formula in B4, which calculates the column width.

Result

    A               B
1 |Dashboard Width  | 1200
2 |Number of Columns| 12
3 |Gutter Width     | 20
4 |Column Width     | 81.67

The calculated column width is shown in B4, rounded to two decimals.

The final result in cell B4 shows the width of each column in pixels for the grid layout.

Sheet Trace Quiz - 3 Questions

How many gutters are there between 12 columns?

A 12

B 11

C 10

D 13

Key Result

Column width = (Total width - (Number of columns - 1) * Gutter width) / Number of columns