Why is there white space to the right edge?


#1

How do you remove the white space to the right edge in the codepen example provided in the documentation for collection-repeat?

When item-width is 33.33%, the white space is very obvious. 25% or 50% are less obvious but there’s still white space. How do you completely get ride of the white space?


#2

So in that example, 33.33% is never going to give you a perfect split 100 / 3 is roughly 33 and a little bit.
But for other examples, like 25%, where you can still see a little gray here and there, that makes sense too.
Your screen size isn’t always going to be something that can be split up evenly.

If you look at the dev tools for each section, it shows that collection repeat will use pixel values for the dimnetions.


#3

@mhartington What you said made a lot of sense. I think what I’m trying to do is to minimize the gap down to no more than 2 pixels assuming the divider is going to be 3 and the screen width is not perfectly divisible by 3. The gap right now is about 5px wide at the minimum when I test on browser. Even on actually device the gap is also seemed as wide as 5px.


#4

Here’s a pull request to have a more precise pixel calculation.