A little Grid Snippet we use at sayhello.ch

hello-grid.scss

/**
* Settings
*/

$grid-space-x	: 2rem;
$grid-padding 	: ($grid-space-x/2);

$grid-columns	: 12;
$grid-size 	: 1200px;


//Breakpoints as suggested here: https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.t6xy2x4af
$grid-breakpoints 	: (
	phone 	: 0px,
	tablet 	: 600px,
	desktop : 1200px, 
);

/**
* Mixins
*/

@mixin make-col-span($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
    margin-left: percentage($size / $columns);
}

@mixin make-col-push($size, $columns: $grid-columns) {
    left: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-pull($size, $columns: $grid-columns) {
    right: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-modifier($type, $size, $columns) {
    // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
    @if $type == push {
        @include make-col-push($size, $columns);
    } @else if $type == pull {
        @include make-col-pull($size, $columns);
    } @else if $type == offset {
        @include make-col-offset($size, $columns);
    }
}

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-space-x) {
    // Common properties for all breakpoints
    %grid-column {
        position: relative;
        // Prevent columns from collapsing when empty
        min-height: 1px;
        // Inner gutter via padding
        padding-left: ($gutter / 2);
        padding-right: ($gutter / 2);
    }

    @each $breakpoint, $min in $grid-breakpoints {
        @for $i from 1 through $columns {
            .col-#{$breakpoint}-#{$i} {
                @extend %grid-column;
            }
        }

        @media (min-width: $min) {
            // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
            %grid-column-float-#{$breakpoint} {
                float: left;
            }
            @for $i from 1 through $columns {
                .col-#{$breakpoint}-#{$i} {
                    @extend %grid-column-float-#{$breakpoint};
                    @include make-col-span($i, $columns);
                }
            }
            @each $modifier in (pull, push, offset) {
                @for $i from 0 through $columns {
                    .col-#{$breakpoint}-#{$modifier}-#{$i} {
                        @include make-col-modifier($modifier, $i, $columns)
                    }
                }
            }
        }
    }
}

/**
* output
*/

.container {

	margin: 0 auto;
	width: 100%;
	max-width: $grid-size;

	padding-left:  $grid-padding;
  	padding-right: $grid-padding;
    
  	@include clearfix();

	.row {
		@include clearfix();
    		margin-left:  -$grid-padding;
    		margin-right: -$grid-padding;
	}
}

@include make-grid-columns();