SCSS: Simple Grid

_simple-grid.scss

$width-grid: 940px;
$grid-gap: 20px;
// $grid-padding: $grid-gap/2;

$grid-item-1-2: ($width-grid - $grid-gap) / 2;
$grid-item-1-3: ($width-grid - ($grid-gap * 2)) / 3;
$grid-item-1-4: ($width-grid - ($grid-gap * 3)) / 4;
$grid-item-1-5: ($width-grid - ($grid-gap * 4)) / 5;
$grid-item-1-6: ($width-grid - ($grid-gap * 5)) / 6;


%grid-1-2 {
    float: left;
    margin: 0 $grid-gap 0 0;
    width: $grid-item-1-2;

    &:last-child {
        margin-right: 0;
    }
}

%grid-1-3 {
    float: left;
    margin: 0 $grid-gap 0 0;
    width: $grid-item-1-3;

    &:last-child {
        margin-right: 0;
    }
}

%grid-1-4 {
    float: left;
    margin: 0 $grid-gap 0 0;
    width: $grid-item-1-4;

    &:last-child {
        margin-right: 0;
    }
}