letter-spacing issue on the grid / grid__item

[anthwinter]

In Chrome 32.0.1700.102, I have noticed that the letter-spacing value of -0.31em has some problems. It makes the grid__item appear 1px smaller in width than you define.

It seems assigning the value of -0.25em, instead of -0.31em, fixes the problem.

I have set up a pen here: http://cdpn.io/EzqDe

[fspoettel]

This is a known issue with this method, I'm working on a fork that uses display: flexwith the current ìnline-block`-grid as a fallback to circumvent this issue once and for all for all modern browsers.

[shaunbent]

I've just been looking into this issue and found that applying both the font-size: 0; fix with letter-spacing: -0.31em; seems to work well across devices and browsers. It seems that the font-size fix takes priority and removes the whitespace correct but for older versions of Android which has a known issue with the font-size fix they fall back to the letter spacing solution.

I'm going to do some further testing across more devices and browsers to be sure. I'll let you know if I find anything different.

[andykirk]

I've been looking into this too:

http://demo.gridlight-design.co.uk/inline-block-spacing.html

HTH

[Krknv]

Whats if .grid { letter-spacing: -$gutter; } ?

[Zlate]

In one forum I read that settings the font-size to 0.1px on the .grid might work.