Column grid (stretch) doesn't divide equally

[Afiq]

Hi,

I’m facing this issue where column grids are not divided equally/accurately. I set up my layout grid with these:

• column count: 4
• type: stretch
• margin: 16px
• gutter:16px

Works fine on even-number’s width (78.25px for each column). But when I change the width to odd-number (iPhone 14 Pro - 393px for example), the 2nd column is 79px wide and the rest are 78px.

I’m not sure if this is a bug or intended to be that way. There’s another topic discussing about the calculation method used is different between layout grid and auto-layout. Please use the same Math rounding for grids & auto-layout - #3 by Radley

Please refer to attachment for reference.

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

[Damien_Alexander_Humby]

I noticed this too and just ended up “prototyping” my website home page in Affinity publisher. Granted, the uneven grid/columns are technically “pixel-perfect” which is a term thrown around in UI job listings, but I prefer evenly spaced considering we work with vectors, not pixels.

[Afiq]

True. Somehow we need to help designers to understand that pixel-perfect is not for everything. Especially when we are working with responsive designs.

I have couple of junior designers (sometimes senior designers too!) who came to me asking if it’s okay for card components are not in pixel-perfect when they use auto-layout and make the card’s width fill the parent container. Then I have to explain to them that pixel-perfect is not for everything, and also telling them to think from development POV on how they can make everything pixel-perfect (UI components used) in responsive designs.

It looks like Figma also need to learn about this too!

Accuracy > pixel-perfect.

[Gleb]

Grids work the same way in the browser and on any other device (pixel perfect, not accurate). Why is accuracy more important for you?

[Afiq]

I’m sorry I just know about browser using pixel-perfect.

But,

There’s a conflict between column grid’s column/gutter calculation and auto layout’s space calculation. In my example here, you can see that the cards are not inside the column area, which can cause confusion to designers who are not aware about the reason.

My suggestion, the calculation for spacing for layout grid and auto layout should be the same.