Percentage Based Issue - Grid

[Ne-Ne]

I have noticed that there are not enough digits in the grid system to allow for a pixel perfect workflow:

As you can see below @ 1271px wide chrome bugs. I can only presume that create a pixel due to the math (33.33333% * 3) - 100% = -0.00001

Is this a problem with my project, as my chrome is the latest and this is also apparent in the latest safari.

For a comparison, I have got the Bootstrap 3 equivalent grid layout, what do you think all?

(Bootstrap 3 - 3 Column Grid [small])

Notice that there are lot more 3's than in foundation 5.

What would be the best way to fix this bug, as scss is used to create the column numerical digits? I dont want to use important as a bug fix for this project.

[davidpustai]

Happend to me too, 👍.

[Ne-Ne]

@davidpustai Did you have a fix or are you still waiting on foundation's email reply..

[davidpustai]

Nope, currently I'm hacking it with !important, as you said.

[Ne-Ne]

@mrsweaters is there a scss setting to allow a longer percentage?

[maximelebreton]

+1

[mrsweaters]

After looking into this issue it doesn't appear that lib-sass has exposed the precision variable for calculations unlike compass. There is an open issue for this functionality:

sass/libsass#287

[cweber]

yes! Same problem:

On this subject...I am experiencing a gap between columns that drops in and out every time I resize my browser. It's rounding pixel percentages and inserting the gap between the divs when the total pixel width of the browser changes from odd to even, etc. I have background colors on these columns, so it's extremely obvious.

This is mitigated by removing the float: right.

<div class="row">
            <div class="large-4 columns">
            </div>
            <div class="large-8 columns">
            </div>
</div>

[adriaandotcom]

Anyone know how to overwrite it with some mixins?

That would be great for the meantime!

[Ne-Ne]

Hi @harianus I wouldn't say this is a scss version but here what I am using:

[class*="column"]+[class*="column"]:last-child {
    float: left !important;
}

If anyone has a better solution, then I welcome it. I hope this precision is fixed. This is quite big of an issue for responsive designs..

[smileyj68]

In instances where you'd like the last column to not float right you can put a class of end on it. We put that in place both for rows with < 12 columns and for times when columns against each other was more important than aligning the right hand edge of each row.

There's not a ton of stuff out there on which decimals various browsers respect, at least not from the last year, but we can resolve this in almost all cases by using calc() for the width. This allows the browser to decide how specific it can get. We still have a manually calculated % fallback. Fixed in 5.3-wip