Grid System and Inline-Block spacing

Question

i've just seen http://csswizardry.com/2013/02/introducing-csswizardry-grids/ and the demo to it (http://csswizardry.com/csswizardry-grids/). I think this is a pretty good approach to solve grids in CSS. So i checked out the source code to see, how it's done and i saw one little thing, which i can't really figure out how it was done.

This Grid System is not using floats but inline-block elements, which is a good thing. But every time i am using inline blocks for percentage width columns / grids etc. i have this inline block spacing. I know there are several ways (mostly just changes in your HTML) to get rid of this spacing: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

But in the grid system i showed you there is none of those fixes (as far as i can see) and still there is no inline-block spacing at all if you check the source code. Just to show you the problem i mostly have here is a quick fiddle: http://jsfiddle.net/nN8mV/

HTML

<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>

CSS

.grid {
    margin-bottom: 20px;
}
    .grid__item {
        float: left;
        width: 33.3%;  
        background: red;
    }
    .grid--inlineblock .grid__item {
        float: none;
        display: inline-block;
    }

You probably know that, but the 33.3% width doesn't work, because of this spacing. The grid systems doesn't seem to have this problem, although it is using "display: inline-block" as well. So my question: How did CSS Wizardy solve this problem? I can't figure it out and changing the HTML (see CSS Tricks link above) doesn't really work very often, because of CMS generated content or other stuff, where you cant adapt your HTML.

Thanks in advance for your help.

Answer 1

Demo from Csswizardry you linked uses comment html hack:

<div class="grid__item"></div><!--
--><div class="grid__item"></div>

Check their demo source.

Also updated your jsfiddle