Grid with static gutter using inner element margin

SassMeister-input-HTML.html

<div class="modules">
  <div class="module_container">
    <div class="module"></div>
  </div>
  <div class="module_container">
    <div class="module"></div>
  </div>
  <div class="module_container">
    <div class="module"></div>
  </div>
</div>

SassMeister-input.scss

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

@import "bourbon/bourbon";
@import "neat/neat";
$gutter: 20px;

body {background: #ddd;}

.modules {
  background: darken(#ddd, 10%);
  @include outer-container;
}

.module {
  min-height: 100px;
  background: #fff;
  margin: 0 $gutter/2;
  
  &_container {
    float: left;
    width: percentage(1/3);
  }
}

SassMeister-output.css

html {
  box-sizing: border-box; }

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

body {
  background: #ddd; }

.modules {
  background: #c4c4c4;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto; }
  .modules:after {
    content: "";
    display: table;
    clear: both; }

.module {
  min-height: 100px;
  background: #fff;
  margin: 0 10px; }
  .module_container {
    float: left;
    width: 33.33333%; }

SassMeister-rendered.html

<div class="modules">
  <div class="module_container">
    <div class="module"></div>
  </div>
  <div class="module_container">
    <div class="module"></div>
  </div>
  <div class="module_container">
    <div class="module"></div>
  </div>
</div>