Why there are different widths of Coloumn Grid in 12col/ 20px Gutter system?

This is likely due to rounding.

Column width calculation is as follows

column_width = (parent_width - (2 * margin) - ((columns - 1) * gutter)) / columns

Assuming the following:

• parent container width = 1200px
• columns = 12
• gutter = 20
• margin = 40

column_width = (1200 - (2 * 40) - (11 * 20)) / 12
column_width = (1200 - 80       - 220      ) / 12
column_width =                           900 / 12
column_width = 75px

This makes even colum widths, because the math results in a whole-number value.


What if we changed the margin to 32px?

column_width = (1200 - (2 * 32) - (11 * 20)) / 12
column_width = (1200 - 64       - 220      ) / 12
column_width =                           916 / 12
column_width = 76.3333px

Now we end up with sub-pixel widths that need to be aligned to a full-pixel grid (i.e., your screen). The simplest solution would be to round to the nearest pixel.  However, if you did that,  you’d be short by 4px, and the grid needs to have the same width as its parent container. 

Rather than applying those 4px to a single column or series of columns (making the grid feel off balance), the Figma algorithm prioritizes trying to make things as uniform as possible.  As such, 2/3 of the columns will be 76px, but 1/3 of them will be 77px (spread out evenly among columns) just so that things add up to the full 1200px of the parent container.