Cacher is the code snippet organizer for pro developers

<div class='grid'>
  <div class='col-1'></div>
  <div class='col-2'></div>
  <div class='col-3'></div>
</div>

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

div {
  background: rgba(0, 0, 0, 0.125);
  border: 1px solid gray;
  height: 15em;
  max-height: 100%;
}

.col-1 {
  width: 320px;
  float: left;
  margin-right: -100%;
  margin-left: 0;
}

.col-2 {
  width: -webkit-calc((((100% - (320px + 2em)) / (5))) * 4);
  width: calc((((100% - (320px + 2em)) / (5))) * 4);
  float: left;
  margin-right: -100%;
  margin-left: -webkit-calc((320px + 1em));
  margin-left: calc((320px + 1em));
}

.col-3 {
  width: -webkit-calc((((100% - (320px + 2em)) / (5))) * 1);
  width: calc((((100% - (320px + 2em)) / (5))) * 1);
  float: right;
  margin-left: 0;
  margin-right: 0;
}

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.4.0)
// ----

@import "singularitygs";
@import "singularity-extras";

* {
  &,
  &::after,
  &::before {
    box-sizing: border-box;
  }
}
div {
  background: rgba(black, .125);
  border: 1px solid gray;
  height: 15em;
  max-height: 100%;
}

.grid {
  @include add-grid(320px 4 1);
  @include add-gutter(1em);
  @include sgs-change('output', 'calc');
}
.col-1 {
    @include grid-span(1, 1);
}
.col-2 {
    @include grid-span(1, 2);
}
.col-3 {
    @include grid-span(1, 3);
}

.grid
  .col-1
  .col-2
  .col-3