【Sass】固定と可変どちらもいける簡単グリッドシステム【Mixin】 ref: http://qiita.com/sawadays0118/items/8dccaf00a7452ee41295

_grid.css

.easyGrid { *zoom: 1; width: 102.9703%; margin-left: -2.9703%; }
.easyGrid:before, .easyGrid:after { content: ""; display: table; }
.easyGrid:after { clear: both; }
.easyGrid > * { float: left; width: 13.66337%; margin-left: 2.9703%; }
.easyGrid > *.gridCol02 { width: 30.29703%; }
.easyGrid > *.gridCol03 { width: 46.93069%; }
.easyGrid > *.gridCol04 { width: 63.56436%; }
.easyGrid > *.gridCol05 { width: 80.19802%; }
.easyGrid > *.gridCol06 { width: 96.83168%; }
.easyGrid > *:first-child + * + * + * + * + * ~ * { margin-top: 20px; }

_grid.scss

.easyGrid {
    @include grid-type-float(20px,30px,138px,6,3,980px);
}

_mixin.scss

// * Responsive Grid System float & box-sizing (IE7 and above. Without box-sizing)
// * If set $parentWidth Responsive Mode
@mixin grid-type-float($mat, $mal, $width, $col, $firstLineCol, $parentWidth:0) {
    $mat: 20px !default;
    $mal: 20px !default;
    $width: 200px !default;
    $col: 4 !default;
    $firstLineCol: #{$col} !default;
    @include clearfix;
    @if $parentWidth == 0 {
        width: $mal * $col + $width * $col;
        margin-left: 0 - $mal;
    }
    @else {
        $mal: nounit($mal);
        $width: nounit($width);
        $parentWidth:nounit($parentWidth) + $mal;
        width: 100% + percentage($mal / $parentWidth);
        margin-left: 0 - percentage($mal / $parentWidth);
    }
    & > * {
        @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
        } @else {
            @include box-sizing(border-box);
        }
        float: left;
        @if $parentWidth == 0 {
            width: $width;
            margin-left: $mal;
        } @else {
            width: percentage($width / $parentWidth);
            margin-left: percentage($mal / $parentWidth);
        }
        @for $i from 2 through $col {
            &.gridCol#{zeropadding($i,2)} {
                @if $parentWidth == 0 {
                    width: ($mal * $i - 1) + $width * $i;
                }
                @else {
                    width: percentage($mal / $parentWidth) * ($i - 1) + percentage($width / $parentWidth) * $i;
                }
            }
        }
        @if $col - ($col - $firstLineCol) == 1 {
            &:first-child ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 2 {
            &:first-child + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 3 {
            &:first-child + * + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 4 {
            &:first-child + * + * + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 5 {
            &:first-child + * + * + * + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 6 {
            &:first-child + * + * + * + * + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 7 {
            &:first-child + * + * + * + * + * + * ~ * {
                margin-top: $mat;
            }
        }
        @if $col - ($col - $firstLineCol) == 8 {
            &:first-child + * + * + * + * + * + * + * ~ * {
                margin-top: $mat;
            }
        }
    }
}

index.html

<ul class="easyGrid">
<li>テキストテキスト</li>
<li class="gridCol02">テキストテキスト</li>
<li class="gridCol03">テキストテキスト</li>
<li class="gridCol02">テキストテキスト</li>
<li class="gridCol04">テキストテキスト</li>
</ul>