Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper">
<div class="row">
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="third">Test</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>

  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="row">
<div class="half">Test</div>
<div class="half">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="half">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
</div>
</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

body,
.cf {
  *zoom: 1;
}

body:before,
.cf:before,
body:after,
.cf:after {
  content: "";
  display: table;
}

body:after,
.cf:after {
  clear: both;
}

*,
*:before,
*:after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  width: 100%;
  overflow-x: hidden;
}

@import "breakpoint";

@mixin to($query, $no-query: false) {
  @include breakpoint($query, $no-query) {
    @content;
  }
}

// flexgrid 4.1.0 - https://github.com/corysimmons/flexgrid

$gutter: 30px;

@mixin box($dir: row, $gut: $gutter) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: $dir;
  @if $dir == row {
    overflow-x: hidden;
    overflow-y: inherit;
  }
  @else {
    overflow-x: inherit;
    overflow-y: hidden;
  }
  @if $gut != 0 {
    @if $dir == row {
      margin-left: -($gut / 2);
      margin-right: -($gut / 2);
    }
    @else {
      margin-top: -($gut / 2);
      margin-bottom: -($gut / 2);
      height: calc(100% + #{$gut});
    }
  }
}

@mixin block($ratio: 1, $dir: row, $gut: $gutter) {
  @if $gut == 0 {
    flex: 0 0 calc(100% * #{$ratio});
    margin-left: 0;
    margin-right: 0;
  }
  @else {
    flex: 0 0 calc(100% * #{$ratio} - #{$gut});
    @if $dir == row {
      margin-left: $gut / 2;
      margin-right: $gut / 2;
    }
    @else {
      margin-top: $gut / 2;
      margin-bottom: $gut / 2;
    }
  }
}

@mixin stretch($layout: grow) {
  @if $layout == masonry {
    flex: 1 0 auto;
  }
  @else {
    flex-grow: 1;
  }
}

@mixin offset($ratio: 1, $gut: $gutter) {
  @if $ratio == 0 {
    margin-left: $gut / 2;
    margin-right: $gut / 2;
  }
  @if $gut > 0 {
    @if $ratio > 0 {
      margin-right: calc(100% * #{$ratio} + (#{$gut} / 2));
    }
    @else {
      margin-left: calc(-100% * #{$ratio} + (#{$gut} / 2));
    }
  }
  @else {
    @if $ratio > 0 {
      margin-right: calc(100% * #{$ratio});
    }
    @else {
      margin-left: calc(100% * #{$ratio});
    }
  }
}

@mixin edit($bg: blue) {
  * {
    background: rgba($bg, 0.1);
  }
}

@mixin align($dir: both) {
  display: flex;
  @if $dir == "horizontal" or $dir == "h" {
    justify-content: center;
  }
  @else if $dir == "vertical" or $dir == "v" {
    align-items: center;
  }
  @else if $dir == "reset" {
    justify-content: inherit;
    align-items: inherit;
  }
  @else {
    justify-content: center;
    align-items: center;
  }
}

html, body {
  height: 100%;
}

@mixin wrap($width: 1000px, $hor: 0, $ver: 0) {
  max-width: $width;
  position: relative;
  margin: $ver $hor;
  left: 50%;
  $left: calc(-50% - #{$hor});
  transform: translateX($left);
}

$basic: 900px;

.wrapper {
  @include wrap(1000px, 30px, 0);
}

.row {
  @include box($gut: 15px);
  @include align(horizontal);
}

.third {
  background: lightgray;
  padding: 15px;
  margin-bottom: 15px;
  @include block;
  @include to($basic) {
    @include block(1/3, $gut:15px);
    background: tomato;
  }
}

.half{
  @include block;
  padding: 15px;
  margin-bottom: 30px;
  @include to($basic) {
    @include block(1/2);
    background: orange;
  }
}

SassMeister-output.css

body, .cf {
  *zoom: 1; }

body:before, .cf:before, body:after, .cf:after {
  content: "";
  display: table; }

body:after, .cf:after {
  clear: both; }

*, *:before, *:after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  overflow-y: scroll;
  overflow-x: hidden; }

body {
  width: 100%;
  overflow-x: hidden; }

html, body {
  height: 100%; }

.wrapper {
  max-width: 1000px;
  position: relative;
  margin: 0 30px;
  left: 50%;
  transform: translateX(calc(-50% - 30px)); }

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow-x: hidden;
  overflow-y: inherit;
  margin-left: -7.5px;
  margin-right: -7.5px;
  display: flex;
  justify-content: center; }

.third {
  background: lightgray;
  padding: 15px;
  margin-bottom: 15px;
  flex: 0 0 calc(100% * 1 - 30px);
  margin-left: 15px;
  margin-right: 15px; }
  @media  (min-width: 900px) {
    .third {
      flex: 0 0 calc(100% * 0.33333 - 15px);
      margin-left: 7.5px;
      margin-right: 7.5px;
      background: tomato; } }

.half {
  flex: 0 0 calc(100% * 1 - 30px);
  margin-left: 15px;
  margin-right: 15px;
  padding: 15px;
  margin-bottom: 30px; }
  @media  (min-width: 900px) {
    .half {
      flex: 0 0 calc(100% * 0.5 - 30px);
      margin-left: 15px;
      margin-right: 15px;
      background: orange; } }

SassMeister-rendered.html

<div class="wrapper">
<div class="row">
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="third">Test</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>

  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="row">
<div class="half">Test</div>
<div class="half">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
<div class="half">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, alias, distinctio, eos, debitis non repellat quaerat facilis vitae ducimus ipsum quam earum deserunt quas minima impedit architecto dolore nobis officiis.</div>
</div>
</div>
</div>