Skip to main content
Question

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

  • January 21, 2025
  • 1 reply
  • 18 views

Ashu Sirswa

Hi ​@figma_admin 
Although CSS grids are useful for consistent box sizes and much more. But inside Figma, I just noticed the width of 12col. grids with 20px gutter are varying. These were supposed to be equal.
But these are same when we change gutter to 24px, the problem arises when we use gutter 20px in 12 col-grid.
I attached ss for clarification.
Have anyone noticed this before?

 

1 reply

Johnson_Ryan
  • Active Member
  • 20 replies
  • May 13, 2025

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings