Masonry Tiles being placed with large gaps between them - masonry

Question

Trying to get Masonry to work on a SaaS product for which I have little control over the DOM but full access to the CSS / JS library.
The problem is with the horizontal placement, not vertical (see attached image).
JSFiddle Here: https://jsfiddle.net/ny2texas/0wncosbr/
OR...
Here is what I am using to call masonry:
jQuery('.boxsitepagebody .blog-post-list').masonry({
// options
containerStyle: null,
itemSelector: '.sblog-post',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 1
});
The CSS snippet I think is relevant:
.grid-sizer,.sblog-post
{
width: 20%
}
Below, The basic construct of the HTML. Note that the absolute placement ("left:40.1862%") is almost exactly 2x the 20% declared as the columnWidth above. But why is it skipping columns and placing the titles every OTHER column?
<ul id="blog_post_list_blog_blog_posts_list_0_1" class="blog-post-list sblog-post-newlist" style="height: 4301.2px;">
<li class="grid-sizer"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 0px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 0px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 545px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 692px;"></li>
...
</ul>

Answer 1

Problem solved.
I had to go into the masonry source code to figure this one out. First thing I had to do was to swap the minified code out for the full source code in GitHub so I could debug the process and placement of each tile.
The width of the tiles (with padding and border) were 179px and the widths of the columns was 175px (856 * 20% I had set in CSS). Since the tile was larger than the column, masonry set colspan to 2 meaning that each post occupied 2 columns (hence the gap). Since masonry has controls to auto pad the positioning of each post it assumes you aren't adding your own padding in CSS. I removed that padding (and the borders) so then 175 = 175px and the tiles placed properly.
To place the horizontal gap in tiling, use the "gutter" call to masonry().