Generated by SassMeister.com.

SassMeister-input-HTML.html

  <main class="container">
    <div class="narrow">narrow</div>
    <div class="wide">wide</div>
    <div class="wider">wider</div>
  </main>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'susy';
@include layout(3);
@include border-box-sizing;

.container {
  @include container('show');
}

.narrow {
  margin-left: span(1 'wide');
  width: span(1);
}

.wide {
  margin-left: span(1 'wide');
  width: span(1 'wide');
}

.wider {
  margin-left: span(1);
  width: span(1 'wider');
}

div {
  background: rgba(yellow, .25);
  border: 1px solid red;
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 35.71429%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.narrow {
  margin-left: 35.71429%;
  width: 28.57143%;
}

.wide {
  margin-left: 35.71429%;
  width: 35.71429%;
}

.wider {
  margin-left: 28.57143%;
  width: 42.85714%;
}

div {
  background: rgba(255, 255, 0, 0.25);
  border: 1px solid red;
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
}

SassMeister-rendered.html

  <main class="container">
    <div class="narrow">narrow</div>
    <div class="wide">wide</div>
    <div class="wider">wider</div>
  </main>