Skip to main content

It’s a minor thing, but it looks like layout grids and auto-layouts use different Math rounding when rounding off to the nearest pixel.


In this example, I have a layout grid with a couple of auto-layouts. They all have the same gutter/spacing.


Screen Shot 2021-04-14 at 1.46.46 PM


If you zoom in, you can see that some of them are off by a pixel:


Screen Shot 2021-04-14 at 1.42.38 PM


It’s possible that grids are using Math.ceil() and auto-layout Math.floor(). Or maybe both are using Math.round and the floating-point math is fluctuating around x.5.


Either way, it would be helpful if you took a look.


Thanks!

Radley

It seems like Math.round() is a better solution, but it is not! In some cases it will NOT round correctly. Also, toFixed() will NOT round correctly in some cases.


To correct the rounding problem with the previous Math.round() and toFixed(), you can define a custom JavaScript round function that performs a “nearly equal” test to determine whether a fractional value is sufficiently close to a midpoint value to be subject to midpoint rounding. The following function return the value of the given number rounded to the nearest integer accurately.


Number.prototype.roundTo = function(decimal) {

  return +(Math.round(this + "e+" + decimal)  + "e-" + decimal);

}



var num = 9.7654;

console.log( num.roundTo(2)); //output 9.77

Unfortunately, there’s another bug.


If a column grid is set to auto stretch and 0 gutter, the last/right guideline will not show. The first/left line works as expected. But mathmatically, the last/right grid line lands on the pixel just outside the layout, so it’s not drawn.


That omission would make sense for old design apps that limit layout grids to the base artboard. But Figma allows nested frames with their own grid. We should be able to see the far right grid line when nested within a larger frame.


Thanks!

Hi,


I’m facing this issue too. I set up my layout grid with these:



  • column count: 4

  • type: stretch

  • margin: 16px

  • gutter:16px


Works fine on even-number’s width. But when I change the width to odd-number (iPhone 14 Pro - 393px for example), the columns are not divided equally.


It’s better to divide the columns equally even though they are not in round number because accuracy is more important than that.


I’m sorry I don’t quite understand the discussion you guys have in here cuz I’m not from technical background. Are you suggesting the same thing too?

Reply


Terms & ConditionsCookie settings