Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="map">map</div>
<div id="form">form</div>
<div id="info">info</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// ----

@import "singularitygs";
@import "breakpoint";
@import "compass";

@include add-grid(12);
@include add-gutter (1/3);

#map {
  @include grid-span(8,1);
  background: green;
  height: 300px;
  }

#form {
  @include grid-span(4,9);
  background: gold;
  height: 500px;
  }

#info {
  @include grid-span(8,1);
  background: purple;
  height: 200px;
  clear: left;
  margin-top: gutter-span();
}

SassMeister-output.css

#map {
  width: 65.95745%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  background: green;
  height: 300px;
}

#form {
  width: 31.91489%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background: gold;
  height: 500px;
}

#info {
  width: 65.95745%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  background: purple;
  height: 200px;
  clear: left;
  margin-top: 2.12766%;
}

SassMeister-rendered.html

<div id="map">map</div>
<div id="form">form</div>
<div id="info">info</div>