SCSS List grid mixin inline-block causing problems

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

It's not sitting 3 on a line when 3 are set when calling the mixin. Updated question to make that clearer. — Doidgey, Sep 08 '14 at 14:48
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — cimmanon, Sep 08 '14 at 15:24

score 0 · Accepted Answer · answered Sep 08 '14 at 15:03

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

SCSS List grid mixin inline-block causing problems

1 Answers1