<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
@import "susyone";

$container-style: magic;
$total-columns: 12;
$column-width: 4rem;
$gutter-width: 1rem;
$grid-padding: $gutter-width;

body {
  background-color: whitesmoke;
  transition: width 1s;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  
  &.half {
    width: 50%;
  }
}

section {
  @include container();
 
  div {
    @include span-columns(2,8);
    @include nth-omega(4n);

    background-color: black;
    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