<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
$base-font-size : 16px;
$base-line-height : 24px;

$breakpoints : (
	mobile 1,
	desktop 8
);

// column measurements
$grid-column-width : 4rem;
$grid-gutter       : 1rem;
$grid-padding      : 0;
$grid-type         : fluid;

/* REMMY */
$total_cols : nth(nth($breakpoints, length($breakpoints)), 2);

* {
	box-sizing: border-box;
}

@function parseInt($n) {
	@return $n / ($n * 0 + 1);
}

@mixin container {
	display: flex;
	js-display: flex; // for flexibility polyfill
	flex-flow: row wrap;
	justify-content: space-between; // NO MORE OMEGAS!
	margin: auto;

	$break : nth($breakpoints, length($breakpoints));
	$break : nth($break, 2) * $grid-column-width;

	@if $grid-type == magic {
		max-width: $break;
	} @else if $grid-type == fluid {
		max-width: 100%;
	} @else if $grid-type == static {
		@for $i from 1 through length($breakpoints) {
			$break : nth($breakpoints, $i);
			$total_cols : nth($break, 2);
			@media only screen and (min-width: $total_cols * parseInt($grid-column-width) * $base-font-size) {
				max-width: $total_cols * $grid-column-width;
			}
		}
	}

	margin-left: auto;
	margin-right: auto;
}

@mixin breakpoint ($n) {
	@for $i from 1 through length($breakpoints) {
		$break : nth($breakpoints, $i);
		@if nth($break, 1) == $n {
			$total_cols : nth($break, 2) !global;
		}
	}

	@media only screen and (min-width: $total_cols * parseInt($grid-column-width) * $base-font-size) {
		@content;
	}
}

@mixin cols ($cols, $reference:$total_cols) {
	flex-flow: row wrap;
	
	@if ($grid-padding != false) {
		padding-left: $grid-padding;
		padding-right: $grid-padding;
	}
	width: calc( (#{$cols} / #{$reference} * 100%) - #{$grid-gutter} + (#{$cols} / #{$reference} * #{$grid-gutter}));
}
/* project */
body {
  background: whitesmoke;
  transition: width 1s;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  
  &.half {
    width: 50%;
  }
}

section {
  @include container();
 
  div {
    @include breakpoint(desktop) {
      @include cols(2,8);
    }
    
    background-color: black;
    float: left;
    height: 6rem;
    margin-bottom: 1rem;
  }
}
function toggle_width() {
  $('body').toggleClass('half');
  
  setTimeout(toggle_width, 3000);
}

toggle_width();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js