Is there a grid system that use percentage-based width for columns and px values for gutters?

I'm looking for a grid solution that will be supported by IE11 which uses percentage-based column widths and px-based gutters. I'm looking for a grid layout with evenly spaced halves, thirds, quarters, sixths, and twelfths, in which the margin may vary depending on the breakpoint. Is this possible?

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: url(https://s.cdpn.io/3/[email protected]);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

Chris Coyier posted a solution, but it's a little wonky, because the gutters are defined by the right padding of the columns: https://codepen.io/chriscoyier/pen/eGcLw Which means, the column widths are not accurate. For example, the first column of a 2 col layout will be less than 50% to account for the gutter, but the second column would be exactly 50% of the grid width, since it there is no right gutter on the last child.

I've had some issues with flex and grid layouts with IE11, so I plan on just using floated block elements.

This is what I came up with. I'm not a math guy, so I can't tell you why these width equations work, or if there's a better algorithm.

https://codepen.io/richiegarcia/pen/YBEVQR

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }

The final code will depend on the kind of grid you want exactly, but maybe this will help you:

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

/* Let's assume that the gap = 20px */

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: -20px; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / (2 / 1)); }

.col-1-3 { width: calc(100% * 1 / 3 - 20px / (3 / 2)); }
.col-2-3 { width: calc(100% * 2 / 3 - 20px / (3 / 1)); }

.col-1-4 { width: calc(100% * 1 / 4 - 20px / (4 / 3)); }
.col-2-4 { width: calc(100% * 2 / 4 - 20px / (4 / 2)); }

<div class="grid">
   <div class="col-1-2"><h3>1/2</h3></div>
   <div class="col-1-2"><h3>1/2</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
</div>

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

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-2-4"><h3>2/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

With a SCSS syntax, on the example above the col width is calculated this way:

calc(100% * #{$colSize} / #{$gridSize} - #{$gap} / (#{$gridSize} / (#{$gridSize} - #{$colSize})));

And the gap is set with margin-right on [class*='col-'].

You can of course write a mixin to create the selectors dynamically:

$gap: 20px;
$maxGridCol: 5;

@for $i from 1 through $maxGridCol {
   @for $y from 1 through $i {
      [class*="col-#{$y}-#{$i}"] {
         width: calc(100% * #{$y} / #{$i} - (#{$gap} / (#{$i} - #{$y})));
      }
   }
}