Grid

grid.scss

$gutter: 20px !default;
$flex: true !default;

$colslist: 1, 2, 3, 4, 5, 6, 12;

@mixin grid-unit($num) {
	@for $i from 1 through $num {
		&_#{$i}of#{$num} {
			width: percentage($i/$num);
			flex-basis: percentage($i/$num);
		}

		&_offset_#{$i}of#{$num} {
			margin-left: percentage($i/$num);
		}
	}
}
.l-grid {

	margin-left: -1 * $gutter / 2;
	margin-right: -1 * $gutter / 2;

	@if $flex == true {
		display: flex;
		flex-wrap: wrap;

		&_center {
			align-items: center;
		}

		&_bottom {
			align-items: flex-end;
		}

	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	&__u {
		box-sizing: border-box;
		padding: 0 $gutter / 2;
		width: 100%;

		@if $flex {
			flex-grow: 0;
			flex-shrink: 0;
		}
		@else {
			float: left;
		}

		& {
			@each $cols in $colslist {
				@include grid-unit($cols);
			}
		}

		@media #{$small-up} {
			&_small {
				@each $cols in $colslist {
					@include grid-unit($cols);
				}
			}
		}

		@media #{$medium-up} {
			&_medium {
				@each $cols in $colslist {
					@include grid-unit($cols);
				}
			}
		}

		@media #{$large-up} {
			&_large {
				@each $cols in $colslist {
					@include grid-unit($cols);
				}
			}
		}
	}

	&_collapse {
		margin-left: 0;
		margin-right: 0;
	}

	&_collapse &__u {
		padding: 0;
	}


}