purelymental-demo/assets/stylesheets/objects/_matrix.css.scss

/*------------------------------------*\
    $MATRIX
\*------------------------------------*/
/**
 * Create a grid of items out of a single list, e.g.:
 *
   <ul class="matrix  three-cols">
       <li class=all-cols>Lorem</li>
       <li>Ipsum <a href=#>dolor</a></li>
       <li><a href=# class=matrix__link>Sit</a></li>
       <li>Amet</li>
       <li class=all-cols>Consectetuer</li>
   </ul>
 *
 * Extend this object in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.matrix{
    @extend .block-list;
    border-left-width:1px;
    @extend .cf;

     > li{
        float:left;
        border-right-width:1px;
    }
}
        .matrix__link{
            @extend .block-list__link;
        }


/**
 * The `.multi-list` object is a lot like the `.matrix` object only without the
 * blocky borders and padding.
 *
   <ul class="multi-list  four-cols">
       <li>Lorem</li>
       <li>Ipsum</li>
       <li>Dolor</li>
       <li>Sit</li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.multi-list{
    list-style:none;
    margin-left:0;
    @extend .cf;
}
    .multi-list > li{
        float:left;
    }


    /**
     * Apply these classes alongside the `.matrix` or `.multi-list` classes on
     * lists to determine how wide their columns are.
     */
    .two-cols > li{
        width:50%;
    }
    .three-cols > li{
        width:33.333%;
    }
    .four-cols > li{
        width:25%;
    }
    .five-cols > li{
        width:20%;
    }
    /**
     * Unfortunately we have to qualify this selector in order to bring its
     * specificity above the `.[number]-cols > li` selectors above.
     */
    .matrix > .all-cols,
    .multi-list > .all-cols{
        width:100%;
    }

/*------------------------------------*\
$MATRIX
\*------------------------------------*/
/**
 * Create a grid of items out of a single list, e.g.:
 *
 <ul class="matrix  three-cols">
 <li class=all-cols>Lorem</li>
 <li>Ipsum <a href=#>dolor</a></li>
 <li><a href=# class=matrix__link>Sit</a></li>
 <li>Amet</li>
 <li class=all-cols>Consectetuer</li>
 </ul>
 *
 * Extend this object in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.matrix{
  border-left-width:1px;
  @extend .cf;

  > li{
    float:left;
    border-right-width:1px;
  }
}


/**
 * The `.multi-list` object is a lot like the `.matrix` object only without the
 * blocky borders and padding.
 *
 <ul class="multi-list  four-cols">
 <li>Lorem</li>
 <li>Ipsum</li>
 <li>Dolor</li>
 <li>Sit</li>
 </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.multi-list{
  list-style:none;
  margin-left:0;
  @extend .cf;
}
.multi-list > li{
  float:left;
}


/**
 * Apply these classes alongside the `.matrix` or `.multi-list` classes on
 * lists to determine how wide their columns are.
 */
.two-cols > li{
  width:50%;
}
.three-cols > li{
  width:33.333%;
}
.four-cols > li{
  width:25%;
}
.five-cols > li{
  width:20%;
}
/**
 * Unfortunately we have to qualify this selector in order to bring its
 * specificity above the `.[number]-cols > li` selectors above.
 */
.matrix > .all-cols,
.multi-list > .all-cols{
  width:100%;
}