SCSS List grid mixin inline-block causing problems - sass

Question

I've just been practicing making some mixins, which at the moment are very basic but just do some simple tasks.
I've made a mixin that I can call in which turns child elements into inline-block elements instead of floats, so that the parent can use text-align to center the elements as things shrink responsively.
The problem I have is this was working fine, but since tweaking it, it doesn't seem to work as it did. I'll provide a working example below. In my example when 3 per row are set, I'm only getting two per row.
My initial thoughts are that it might be extra space created by inline-block? Although my vertical-align: top; was to negate that.
HTML
<div id="site-wrap">
<div class="list__wrap">
<div class="list__item">1</div>
<div class="list__item">2</div>
<div class="list__item">3</div>
<div class="list__item">4</div>
<div class="list__item">5</div>
<div class="list__item">6</div>
<div class="list__item">7</div>
<div class="list__item">7</div>
</div>
</div>
SCSS
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
//position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
word-wrap: break-word;
}
}
}
//start of our styles
#site-wrap{
max-width: 1020px;
margin: 0 auto;
background: {
color: Black;
}
}
.list__wrap{
#include clearfix;
// Call in our mixin on the inner divs
#include list-grid(3, 10, list__item, class);
// We can use text-align to center the list when it's shrinking down
text-align: center;
.list__item{
background: {
color: Tomato;
}
}
}
Working example: http://codepen.io/vdecree/pen/wuExl

Answer 1

I think I found a solution that is not as icky as having to format the HTML in a certain way. Rather that use font-size: 0; on the parent (because this broke my negative margins) — you can use letter-spacing: -0.31em;
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
letter-spacing: -0.31em;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
font-size: 16px;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
letter-spacing: 0;
word-wrap: break-word;
}
}
}
Source