Hi,

I’m not sure, but I don’t understand the way the left position is calculated on layouts based on percentage widths.

That even doesn’t work correctly in the example provided on your webpage: [http://codepen.io/desandro/pen/JFpeg]

• One Column is 20% wide
• an Item in the second column has a left value of "19.777643590381132%", or "19.79269328802039%", or "19.813567394706403%", depending on the width of the container

→ I’m not a genius on maths … but, I thought that the second column should always start at 20% instead.

This uneven percentages lead to 1px flashing gutters, depending on the size of the container.
MacOSX; Safari, Chrome, Firefox …

To me, this looks like the script re-calulates to percent, what the browser formerly calculated in pixels from the percentages provided by CSS, like:
css/percentage → browser/pixel → script/percentage

I’m aware that it’s not always possible to count with even pixels on fluid layouts: you simply can’t divide 981 pixels by 5 columns with non-comma-pixel-widths.

But, that’s what the percentage values are for. They tell the browser "that’s your job". And the browsers are able to dived the space in columns. And when I set the left values to 20% (40%, 60%, 80%) in the WebInspector, there are no flashing gutters.

→ Wouldn’t it be better to get/read the CSS width percentage value of the itemSelector element, to directly and exactly set the left value of the next item …?
[ left: 0; width: 20% ][ left: 20%; width: 40% ][ left: 60%; width: 20% ] …