Grid generator sass mixin

flexbox.css

.col {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.around-xs {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.first-xs {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.last-xs {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.col-xs-1 {
  -ms-flex-preferred-size: 8.3333333333%;
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-xs-2 {
  -ms-flex-preferred-size: 16.6666666667%;
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  -ms-flex-preferred-size: 33.3333333333%;
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-xs-5 {
  -ms-flex-preferred-size: 41.6666666667%;
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  -ms-flex-preferred-size: 58.3333333333%;
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-xs-8 {
  -ms-flex-preferred-size: 66.6666666667%;
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  -ms-flex-preferred-size: 83.3333333333%;
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-xs-11 {
  -ms-flex-preferred-size: 91.6666666667%;
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0%;
}

.col-xs-offset-1 {
  margin-left: 8.3333333333%;
}

.col-xs-offset-2 {
  margin-left: 16.6666666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.3333333333%;
}

.col-xs-offset-5 {
  margin-left: 41.6666666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.3333333333%;
}

.col-xs-offset-8 {
  margin-left: 66.6666666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.3333333333%;
}

.col-xs-offset-11 {
  margin-left: 91.6666666667%;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-push-0 {
  left: 0%;
}

.col-xs-pull-0 {
  right: 0%;
}

.col-xs-push-1 {
  left: 8.3333333333%;
}

.col-xs-pull-1 {
  right: 8.3333333333%;
}

.col-xs-push-2 {
  left: 16.6666666667%;
}

.col-xs-pull-2 {
  right: 16.6666666667%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-push-4 {
  left: 33.3333333333%;
}

.col-xs-pull-4 {
  right: 33.3333333333%;
}

.col-xs-push-5 {
  left: 41.6666666667%;
}

.col-xs-pull-5 {
  right: 41.6666666667%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-push-7 {
  left: 58.3333333333%;
}

.col-xs-pull-7 {
  right: 58.3333333333%;
}

.col-xs-push-8 {
  left: 66.6666666667%;
}

.col-xs-pull-8 {
  right: 66.6666666667%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-push-10 {
  left: 83.3333333333%;
}

.col-xs-pull-10 {
  right: 83.3333333333%;
}

.col-xs-push-11 {
  left: 91.6666666667%;
}

.col-xs-pull-11 {
  right: 91.6666666667%;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-pull-12 {
  right: 100%;
}

grid.sass

@mixin grid($size, $type: 'flex', $columns: 12)
					
	//Auto column
	@if $type == 'flex'
		.col
			-webkit-box-flex: 1
			-ms-flex-positive: 1
			flex-grow: 1
			-ms-flex-preferred-size: 0
			flex-basis: 0
			max-width: 100%
		
		.start-#{$size}
			-webkit-box-pack: start
			-ms-flex-pack: start
			justify-content: flex-start
			text-align: start

		.center-#{$size}
			-webkit-box-pack: center
			-ms-flex-pack: center
			justify-content: center
			text-align: center

		.end-#{$size}
			-webkit-box-pack: end
			-ms-flex-pack: end
			justify-content: flex-end
			text-align: end

		.top-#{$size}
			-webkit-box-align: start
			-ms-flex-align: start
			align-items: flex-start

		.middle-#{$size}
			-webkit-box-align: center
			-ms-flex-align: center
			align-items: center

		.bottom-#{$size}
			-webkit-box-align: end
			-ms-flex-align: end
			align-items: flex-end

		.around-#{$size}
			-ms-flex-pack: distribute
			justify-content: space-around

		.between-#{$size}
			-webkit-box-pack: justify
			-ms-flex-pack: justify
			justify-content: space-between

		.first-#{$size}
			-webkit-box-ordinal-group: 0
			-ms-flex-order: -1
			order: -1

		.last-#{$size}
			-webkit-box-ordinal-group: 2
			-ms-flex-order: 1
			order: 1
			
	// columns
	@if $type != 'fractions'
		@for $x from 1 through $columns
			$width: percentage($x/$columns)
			.col-#{$size}-#{$x}
				@if $type == 'flex'
					-ms-flex-preferred-size: $width
					flex-basis: $width
					max-width: $width
				@else
					width: $width
	
		//offsets
		@for $offset from 0 through $columns
			.col-#{$size}-offset-#{$offset}
				margin-left: percentage($offset/$columns)

		
		//push & pull
		@for $item from 0 through $columns
			.col-#{$size}-push-#{$item}
				left: percentage($item/$columns)
			.col-#{$size}-pull-#{$item}
				right: percentage($item/$columns)

	@else
		@for $x from 1 through $columns
			@for $y from 1 through $x
				@if $y!=$x
					$width: percentage($y/$x)
					.col-#{$size}-#{$y + '-' + $x}
						width: $width
						@for $k from 1 through $x
							@if $x!=$k
								$offset: percentage($k/$x)
								&.col-#{$size}-offset-#{$k}
									margin-left: $offset
								&.col-#{$size}-pull-#{$k}
									right: $offset
								&.col-#{$size}-push-#{$k}
									left: $offset


+grid('lg')