<header></header>
<main>
  <aside></aside>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</main>
$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;
	}
  margin-left: 0;
  margin-right: 0;
	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%;
  }
}
main {
  @include container();
  
  aside {
    background-color: black;
    height: 20rem;
    
    @include breakpoint(desktop) {
      @include cols(2,8);
    }
  }
  
  section {
    width: 100%;
    
    @include container;

    @include breakpoint(desktop) {
      @include cols(6,8);
    }
 
    div {
      background-color: black;
      height: 6rem;
      margin-bottom: 1rem;
      
       @include breakpoint(desktop) {
        @include cols(2,8);
      }
    }
  }
}
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